React应用程序运行时出现“Invalid Host Header”

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 成功编译。但是访问 URL 时网页显示“无效的主机头”。

有谁能帮忙解决这个问题吗？我对 React 还比较新手。

提前感谢您的帮助。

- Bharat Sewani

Answer 1

在您的webpack配置中，可以在devServer配置中添加disableHostCheck: true 。例如：

devServer: {
  disableHostCheck: true
}

- Kenrick

---

这并不推荐，因为它会引入安全问题。请参考 https://github.com/webpack/webpack-dev-server/issues/887 以了解详细解释。 - mgol

那么推荐的解决方案是什么？链接似乎没有解决。 - mel3kings

此解决方案适用于本地环境。 - alexandre-rousseau

Answer 2

在Webpack的更新版本中（我使用v4），disableHostCheck已不可用，但文档建议使用allowedHosts。这对我有效。

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

请查看Webpack的devServer.allowedHosts。

- nyxz

Answer 3

配置React目标主机将修复“Invalid Host Header”错误。

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

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

HOST=my.devserver.com

重新启动React应用并在http://my.devserver.com:3000/上访问。

如果需要让其他计算机访问my.devserver.com，将以下行添加到您的hosts文件中（Unix系统上的/etc/hosts）：

0.0.0.0 my.devserver.com

- AAber

---

当我在本地使用nginx + ssl时，这个解决方案不起作用。我正在使用nginx作为透明代理 - 等等（也许我需要更改我的nginx容器上的主机文件...）...令人困惑... - johndpope

Answer 4

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

webpack-dev-server 已经发布了 v2.4.3 版本。

引用他们的补丁说明:

请求的 Host header 必须匹配监听地址或 public 选项提供的主机。请确保在此处提供正确的值。

他们还包括了disableHostCheck来关闭此检查，但是

只有在您知道自己在做什么时才使用它。不建议使用。

- Gleb Eliseev

---

但是为什么它会在webpack 2.2.0版本中出现错误？ - Bharat Sewani

好问题。我的 package.json 版本是 ^1.16.2，但仍然出现了问题。 - Gleb Eliseev

@BharatSewani，由于先前的设置存在安全问题，它被放入了补丁版本中。请参见https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a和https://github.com/webpack/webpack-dev-server/issues/887。 - mgol

@m_gol 非常感谢！实际上它的意思是 “也许他们只在程序出了问题时才会读发布说明。” - Gleb Eliseev

谢谢提供的信息 :) 我已经阅读了这篇文章，所以我们应该在npm启动脚本中传递“public:www.xyz.com”，而不是执行“disable host check : true”操作，对吗？ "build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --public xyz.com --content-base . " 其中xyz.com是我们的服务器IP。 如果我有误，请纠正我，@m_gol。 - Bharat Sewani

Answer 5

如果您在使用nginx代理+ssl和docker时看到这个问题，我需要指定HOST和专用代理变量。
https://github.com/plaid/quickstart/blob/master/frontend/src/setupProxy.js
实际上，我需要告诉react 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

- johndpope

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 . "

- young