运行 React App 时出现“无效的主机标头”

Question

我有一个简单的 React JS 项目，并且正在部署到 OSE 中。我还在我的项目中使用以下依赖项。

 "webpack": "^2.2.0",
 "webpack-dev-server": "^1.14.1",
 "react": "^15.5.4",
 "react-router-dom": "^4.1.1"

我还通过下面的构建脚本运行我的项目。

"build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --content-base . "

OSE 一切正常，Webpack 编译成功。但访问该网址时，它在网页上显示“无效的主机标头”。

任何人都可以帮忙解决这个问题吗？ React 中有些新内容。

提前致谢。

Answer 1

在您的 webpack 配置中，您可以在 disableHostCheck: true

 配置中添加 

devServer。例如，

devServer: {
  disableHostCheck: true
}

Answer 2

在较新版本的 Webpack（我使用 v4）中，

disableHostCheck

不可用，但文档建议使用

allowedHosts

。这对我有用。

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

参见 Webpack 的 devServer.allowedHosts。

Answer 3

只是为了解释为什么会发生这种情况。

webpack-dev-server已发布v2.4.3。

引用他们的补丁说明：

请求的 Host 标头必须与监听地址或公共选项中提供的主机匹配。 确保在此处提供正确的值。

他们还包括

disableHostCheck

来关闭此检查，但是

仅当您知道自己在做什么时才使用它。不推荐。

Answer 4

配置react目标主机将修复“无效的主机标头”错误

找到您的 React 服务器的 FQDN，例如，如果您的服务器的 FQDN 是：my.devserver.com

将以下行添加到您的 .env 文件中：

HOST=my.devserver.com

重新启动 React 应用程序并通过 http://my.devserver.com:3000/

访问它

如果需要从其他计算机访问 my.devserver.com，请将此行添加到您的主机文件（基于 Unix 的系统上的 /etc/hosts）：

0.0.0.0 my.devserver.com

Answer 5

如果您看到它与 nginx proxy + ssl / 和 docker 结合使用，我需要指定 HOST，但也需要指定定制代理变量
https://github.com/plaid/quickstart/blob/master/frontend/src/setupProxy.js

我基本上需要告诉 HOST + 做出反应 环境：

- REACT_APP_API_HOST=www.yourdomainhere.com
- HOST=frontend 


services:
  go:
    networks:
      - "quickstart"
    depends_on:
      - "frontend"
    image: "100418366104"
    ports: ["8000:8000"]

 
  frontend:
    environment:
      - REACT_APP_API_HOST=www.yourdomainhere.com # see above setupProxy.js file
      - HOST=frontend 
    networks:
      - "quickstart"
    image: "e478fc0620e6"
    ports: ["3000:3000"]
  nginx:
    networks:
      - "quickstart"
    build:
        dockerfile: ./nginx/Dockerfile
        context: .
    ports:
        - 80:80
        - 443:443
    depends_on:
        - frontend
networks:
  quickstart:
    name: quickstart

Answer 6

在构建脚本中将主机更改为 127.0.0.1。

"build": "SET NODE_ENV=production && webpack-dev-server --host 127.0.0.1 --inline --history-api-fallback --content-base . "

Answer 7

我已经通过将域包含在 allowedHosts 中以及 webpack.config.ts 的主机名客户端属性中来解决这个问题

devServer: {
    allowedHosts: [
        'example.com'
    ],
    client: {
        webSocketURL: {
        hostname: 'example.com', <-- this one triggers 'invalid host header' on my case
        port: 443, // Port HTTPS
        protocol: 'wss',
        },
    }