webpack从域访问时主机报头无效，IP访问时不合法

Question

我已经设置了一个域名到我的服务器，我已经通过IP访问了一段时间，但现在我正在尝试通过域名访问它。当我从IP地址查看它时，我的react应用程序工作正常，但是当我尝试通过域名时，它显示"Invalid host header“。

在我的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代码是开源的，配置这些头的组件在react-scripts npm依赖项中，在package.json中，代码是open sourced here。

Here是Github的问题，我(Devssh)是其中的一部分，它解决了这个问题

对于您应该做的事情，Here是合适的文档。

我之所以知道有人在创建项目时使用了create-react-或将其弹出，是因为你提到的 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存储库，正在运行。如果您对自己的配置进行了重大改动，您可以在文件夹中查看webpack的配置配置。

如果您正在使用HTTPS来启用它，也请遵循我之前提供的文档！如果您正在尝试重新创建自己正在做的create-react-app，跟随其开放源代码中的主机头，您将能够看到他们检查的位置，并相应地提升Invalid Host header和编辑您的配置。

备用项：

是另一个存在问题的，它通过更改devServer配置来解决问题。他们在webpack devServer中的解决方案如下所示

disableHostCheck: true

或

public: 'dns-here.com'

如果您使用它与--生产标志，您可能必须禁用主机检查或添加域名作为您的prod.webpack.yml默认或提供它作为标志，当启动react应用程序时，如this github issue所示，建议添加--public your-host:8080或许多其他潜在的修复程序。

如果这仍然不能解决你的问题，请留下你的问题的评论，我会相应地更新。:)

Answer 2

尝尝这个

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