Question

我用react-create-app创建了一个应用程序，我只是使用npm start来开发它，似乎反应脚本根据我的package.json开始

每当我向package.json添加代理时，都会收到以下错误消息：

Invalid Host header

我明白了，这是一个安全问题。我没有得到的是如何解决它。我在这里就github和QA阅读了几个关于这个主题的问题，修复很容易，但我还是没有把它放到哪里

最后，我将添加一个主机白名单。我想我认为这是可能的。

但我在哪里开始使用此配置：

devServer: {
  disableHostCheck: true
}

Answer 1

我从未发现将webpack.config.js放在哪里。它在应用程序根目录中无效，我认为它应该去，它没有为我做任何事情，我最后修改了react-scripts调用webpack-dev-server的地方，然后将disableHostCheck直接置于true之前调用

基本上我改变了以下一行：

const serverConfig = createDevServerConfig(
  proxyConfig,
  urls.lanUrlForConfig
);

到：

var serverConfig = createDevServerConfig(
  proxyConfig,
  urls.lanUrlForConfig
);
serverConfig.disableHostCheck = true;

这真的不是很好的做法（修改代码和禁用HotCheck），但现在我知道我可以实际修改设置，我只是去白名单，可能有一天我会理解为什么它不关心我的webpack.config.js ^^

Answer 2

您可以在不更改node_modules内的内容的情况下管理它，也可以使用名为react-app-rewired的npm包弹出项目。

它基本上有一个选项可以覆盖create-react-app样板设置中的webpack的默认硬编码设置。

您在根文件夹中放置config-overrides.js并更改package.json内的脚本以匹配react-app-rewired而不是react-scripts。这样，您可以通过在config-overrides.js文件中写下来覆盖反应项目中硬编码的所有webpack配置。

语法位于此link内。还有一篇关于它的文章可以找到here。

Answer 3

安装react-app-rewired：

npm install react-app-rewired --save-dev

将package.json脚本更改为

"start": "set PORT=80&&react-app-rewired start",

然后添加名为.env.development的文件，添加以下行：
```
HOST=buzzbuzzenglish.com
```
最后您输入npm start，然后浏览器将会打开并导航到buzzbuzzenglish.com并正常呈现而不会出现Invalid Host Header错误。

Answer 4

禁用主机检查的另一种方法是设置以下环境变量：DANGEROUSLY_DISABLE_HOST_CHECK=true

这可以通过例如将该行添加到项目根目录中的.env文件中。请注意，这不是安全的解决方案，不应在生产中使用。

react-scripts无效的主机头

4 个答案: