在使用 create-react-app 时，我也遇到了类似的问题。我将提供一个解决方案，您可以使用它来解决这个问题，如果您没有使用 create-react-app 或已从其中弹出而没有留下任何痕迹，我将提供已修复的开源代码的链接这个，你可以跟着找到解决方案。
解决方案是创建名为
的文件
.env.development
HOST=ec2-13-121-203-43.ap-south-1.compute.amazonaws.com
.env.development.local
DANGEROUSLY_DISABLE_HOST_CHECK=true
.env.local
HOST=ec2-13-121-203-43.ap-south-1.compute.amazonaws.com
create-react-app 代码是开源的，配置这些标头的组件位于 package.json 中的 react-scripts npm 依赖项中
代码是open sourced here。
Here 是我（devssh）参与解决此问题的 Github 问题
Here 是您应该做什么的正确文档。
我知道有人在创建您的项目时使用 create-react-app 或从它弹出的原因是您提到的错误Invalid host header 仅在他们必须使用通用 http 库的情况下存在。从应用程序中弹出后，您将获得对 webpack 脚本的控制权。
create-react-app 上的安全团队添加了此标头，以通过 CORS 等各种标头劝阻不了解安全性的人，并明确征得您的同意以禁用检查。要了解有关安全标头的更多信息here 是页面底部的指南，您有指向标头的链接。
发生错误是因为他们的代码中有一个 if 条件来检查跨域请求，如果域名不匹配，他们会引发此错误并将其视为恶意尝试访问应用程序的人，因此他们阻止请求并且不发送 bundle.js。
我还必须将 "proxy": "http://0.0.0.0:8080", 添加到我的 package.json 中。
这是我的完整 package.json
{
"name": "blockchain-full-node",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"axios": "^0.18.0",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"crypto-js": "^3.1.9-1",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"font-awesome": "^4.7.0",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"js-joda": "^1.8.2",
"moment": "^2.22.1",
"node-sass": "^4.9.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
"react-qr-reader": "^2.1.0",
"react-router-dom": "^4.2.2",
"react-scrollspy": "^3.3.5",
"resolve": "1.6.0",
"sass-loader": "^7.0.1",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"proxy": "http://0.0.0.0:8080",
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
This 是我正在运行的公共 github 存储库。您可以在 config 文件夹中查看 webpack 配置，如果您更改了自己的重大破坏性内容。
如果您使用 HTTPS 来启用它，还请遵循我之前提供的文档！如果您尝试自己重新创建 create-react-app 正在执行的操作，请按照其开源代码中的 HOST 标头，您将能够看到他们检查的位置并提出 Invalid Host header 并相应地编辑您的配置。
替代：
Here 是另一个 SO 问题，通过更改他们的 devServer 配置来解决问题。
他们的修复在他们的 webpack devServer 中如下所示
disableHostCheck: true
或
public: 'dns-here.com'
如果您将它与 --production 标志一起使用，您可能必须禁用主机检查或将域添加为您的 prod.webpack.yml 中的默认域，或者在启动 react 应用程序时将其作为标志提供，如所示this github issue 建议添加 --public your-host:8080 或许多其他潜在修复。
如果这仍然不能解决您的问题，请对问题发表评论，我会相应地更新。 :)