Question

我已经为我的服务器设置了一个域名，我已经通过IP访问了一段时间，但是现在我正尝试通过该域名访问它。当我从IP查看它时，我的react应用程序运行良好，但是当我尝试通过该域访问时，它显示“无效的主机头”。

在我的Webpack中，我已经（并且我已经尝试了所有在线版本）：

devServer: {
        historyApiFallback: true,
        inline: true,
        hot: true,
        overlay: true,
        disableHostCheck: true,
        port: 80,
        host: '0.0.0.0',
        allowedHosts: [
            '.oribar.com',
            'oribar.com',
            'localhost',
            '0.0.0.0'
        ]
    },

Answer 1

在使用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 app时将其作为标志提供，如图所示。 this github issue建议添加--public your-host:8080或许多其他潜在的修复程序。

如果这仍然不能解决您的问题，请对问题发表评论，我将进行相应的更新。：）

Answer 2

尝试

devServer: {
  // ... other options
  public: 'oribar.com:80'
},

webpack从域（而不是通过IP）访问时无效的主机头

2 个答案: