1. 复现错误

在搭建vue-cli环境，用nginx做代理服务器，访问时却显示：Invalid Host header。

2. 分析错误

知其然，知其所以然，我们在解决该问题之前，要弄明白Invalid Host header是什么。

ChatGPT目前正火，可以借助ChatGPT来回答，Invalid Host header是什么，如下图所示：

The “Invalid Host header” error typically occurs in web applications when a request is made to a server with an incorrect or unexpected host header value.

The host header is a mandatory field in HTTP requests, and it specifies the host name of the server that the client wants to connect to. When a client sends a request to a server, the server verifies that the host header value matches the hostname of the server. If the host header value does not match the server hostname, the server may reject the request with an “Invalid Host header” error message.

This error can occur for various reasons, including:

• The client is sending a request to the wrong server.
• The client is sending a request to an IP address instead of a hostname.
• The client is using a proxy or load balancer that is forwarding requests with an
  incorrect host header value.
• The server is configured to only accept requests with specific host header values, and the client is not sending a matching value.

To resolve this error, you may need to check your server configuration or verify that the client is sending requests to the correct server and with the correct host header value. You may also need to check if there are any proxies or load balancers involved in the request that may be modifying the host header value.

然而，可惜的是，ChatGPT给出英文的回复，我部门不妨将其翻译成中文，如下所示：

当向具有不正确或意外的主机标头值的服务器发出请求时，Web应用程序中通常会出现无效的主机头错误。

主机标头是HTTP请求中的必填字段，它指定客户端要连接到的服务器的主机名。当客户端向服务器发送请求时，服务器会验证主机标头值是否与服务器的主机名匹配。如果主机标头值与服务器主机名不匹配，服务器可能会拒绝请求，并显示主机标头无效错误消息。

发生此错误的原因包括：

• 客户端正在向错误的服务器发送请求。
• 客户端正在向IP地址而不是主机名发送请求。
• 客户端正在使用代理或负载均衡器转发具有不正确的主机标头值。
• 服务器配置为仅接受具有特定主机标头值的请求，并且客户端未发送匹配值。

若要解决此错误，可能需要检查服务器配置或验证客户端是否使用正确的主机标头值向正确的服务器发送请求。你可能还需要检查请求中是否涉及任何可能正在修改主机标头值的代理或负载均衡器。

也就是说，Invalid Host header是无效的主机头，产生这种错误的原因，上文也提到了。

但上文提到的原因，都不是我问题的原因，我只能通过自己去排查错误了。

经过反复的排查得知，因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。

如下2种方法，解决这个问题：

1. 设置跳过host检查

2. 将host设置成你的主机地址

3. 解决错误

3.1 设置跳过host检查，有如下2种方法。

1. 你可以在devServer字段中添加disableHostCheck: true，跳过host检查。

devServer字段在build目录下的webpack.dev.conf.js文件中，如下图所示：

2. 在package.json文件中修改scripts命令：webpack-dev-server --disableHostCheck=true，如下图所示：

3.2 将host设置成你的主机地址，也有如下2种方法

1. 在config目录下修改index.js文件的host。

这个默认是localhost，可修改成xxx.com，比如superjson.com，如下图所示：

2. package.json的script添加如下语句：

 webpack-dev-server --host=xxx.com

或者

--public=xxx.com

如果以上错误的解决方法，无法解决你的错误，可以参考如下解决该错误的方法。

4. 其他方法解决该错误

正如上文所提到的，Invalid Host header是一个常见的错误信息，通常发生在Web应用程序中。

它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。

解决该错误的其他方法如下：

1. 检查你的Web应用程序配置文件中的主机名是否正确，并确保它与实际的请求主机名匹配。

2. 在你的Web应用程序配置文件中添加一个可信的主机名列表，这将确保只有从列表中授权的主机名才能访问你的应用程序。

3. 检查代理服务器或负载均衡器的配置，并确保它们正确地转发主机头。

4. 如果你使用了SSL加密，请确保你的SSL证书中包含正确的主机名，并且证书已经正确安装。

5. 尝试在你的Web应用程序中禁用Host header检查。请注意，这可能会带来安全风险，因为攻击者可以使用伪造的 Host header 来绕过某些安全措施。

6. 更新Web应用程序的代码。在某些情况下，错误可能是由Web应用程序代码引起的。确保应用程序代码正确处理请求头。你可以通过查看应用程序的文档或联系开发人员来了解更多信息。

7. 启用信任代理头。如果你使用的服务器软件支持信任代理头，则可以启用此选项来解决问题。这将告诉服务器从代理服务器接收请求时信任代理头。

总之， Invalid Host header错误通常是由于配置问题或网络设备设置不正确引起的。

通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。

无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。