运行 React App 时出现“Invalid Host Header”答案

【问题标题】："Invalid Host Header" in When running React App运行 React App 时出现“Invalid Host Header”
【发布时间】：2017-09-24 19:43:33
【问题描述】：

我有一个简单的 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 时，它会在网页上显示“Invalid Host Header”。

有人可以帮忙吗？ React 中的一些新东西。

提前致谢。

【问题讨论】：

标签： reactjs deployment webpack react-router webpack-dev-server

【解决方案1】：

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

devServer: {
  disableHostCheck: true
}

【讨论】：

不建议这样做，因为它会引入安全问题。有关说明，请参阅 github.com/webpack/webpack-dev-server/issues/887。
那么推荐的解决方案是什么？链接似乎没有解析
本地环境可以接受此方案。

【解决方案2】：

只是为了解释为什么会这样。

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

引用他们的补丁说明：

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

他们还添加了disableHostCheck 以关闭此检查，但是

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

【讨论】：

但是为什么它与 2.2.0 的 webpack 版本不同？？
好问题。我的 package.json 版本是 ^1.16.2。还是坏了。
@BharatSewani 由于之前的设置存在安全问题，它已被放入补丁版本。见medium.com/webpack/… & github.com/webpack/webpack-dev-server/issues/887。
@m_gol 非常感谢！它实际上是 也许他们会在它崩溃时阅读发行说明。
感谢您的信息 :) 我阅读了这篇文章，所以不要禁用主机检查：是的，我们应该在我们的 npm 启动脚本中传递 'public:www.xyz.com' 吗？ "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

【解决方案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，请将此行添加到您的主机文件（基于 Unix 的系统上是 /etc/hosts）：

0.0.0.0 my.devserver.com

【讨论】：

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

【解决方案4】：

如果您看到这个与 nginx 代理 + ssl / 和 docker 结合使用，我需要指定 HOST 但还需要指定代理 var
https://github.com/plaid/quickstart/blob/master/frontend/src/setupProxy.js

我基本上需要告诉反应主机+ 环境：

- 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

【讨论】：

【解决方案5】：

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

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

【讨论】：