前端 - Vue2 Proxy代理服务器HTTP头溢出错误处理?

Question

新手提问：
在使用Vue2的Proxy代理服务器中，出现了以下错误，上网搜后得知是http报文过长。情景是 传输账号和密码，token放在了Authorization中。怎么解决？
Proxy error: Could not proxy request /login/match?stn=20240101&stp=[-密码-] from localhost:8080 to http://localhost:3367.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (HPE_HEADER_OVERFLOW).

-

Answer 1

这个错误提示 HPE_HEADER_OVERFLOW 表示HTTP请求头的长度超过了Node.js默认的最大限制。这通常发生在将大量的数据放在HTTP头中，如Authorization token，尤其是在处理如JWT（JSON Web Tokens）等较大的令牌时。

要解决这个问题，你有几个选择：

1. 减少HTTP头的大小：检查你的Authorization token是否过大。如果是JWT，尝试减少其中的数据量或优化它。例如，你可以考虑不在JWT中存储不必要的用户数据。
2. 增加Node.js的HTTP头大小限制：你可以通过修改Node.js的HTTP模块来增加头的大小限制。这可以通过以下代码实现：

const http = require('http');const https = require('https');const httpAgent = new http.Agent({ maxHeadersCount: 1000 }); // 设置为更大的值const httpsAgent = new https.Agent({ maxHeadersCount: 1000 }); // 设置为更大的值module.exports = {  devServer: {    proxy: {      '/api': {        target: 'http://localhost:3367',        changeOrigin: true,        secure: false,        agent: process.env.NODE_ENV === 'development' ? httpAgent : httpsAgent      }    }  }};

在上面的代码中，我们创建了一个新的HTTP和HTTPS代理，并将maxHeadersCount的值设置得更大。然后，我们将这些代理应用到devServer的proxy配置中。

请注意，这种方法可能会增加内存使用，因为更大的头需要更多的内存来存储。因此，请确保你的应用程序有足够的内存来处理更大的头。

3. 考虑将令牌存储在cookie中：如果你的应用程序支持，你也可以考虑将令牌存储在HTTP cookie中，而不是放在HTTP头中。这将避免头的大小限制问题，但可能需要你修改应用程序的代码以处理cookie中的令牌。

选择哪种方法取决于你的具体情况，包括你的应用程序的需求，以及你愿意投入多少时间来修改代码。