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

Question

我已经设置了一个域名到我的服务器，我已经通过IP访问了一段时间，但现在我试图通过域名访问它。当我从IP查看时，我的react应用程序工作正常，但当我尝试通过域时，它会显示“无效主机头”。

在我的网页中，我已经（并且我已经在网上尝试了各种变体）：

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

试试这个

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

Answer 2

在使用CreateReact应用程序时，我也遇到了类似的问题。我将提供一个解决方案，您可以使用它来解决这个问题，如果您没有使用CreateReact应用程序，或者从中弹出了一个没有留下任何痕迹的应用程序，我将提供指向修复此问题的开源代码的链接，您可以继续查找解决方案。

解决方案是创建名为

.环境。发展

HOST=ec2-13-121-203-43.ap-south-1.compute.amazonaws.com

.环境。发展地方的

DANGEROUSLY_DISABLE_HOST_CHECK=true

.环境。地方的

HOST=ec2-13-121-203-43.ap-south-1.compute.amazonaws.com

create-react-app代码是开源的，配置这些标头的组件位于package.json中的react-criptnpm依赖项中。

这里是Github问题，我（devssh）参与解决了这个问题

以下是您应该做的适当文档。

我知道有人在创建项目时使用了create-react-app或从其弹出的原因是，您提到的错误无效的主机头仅在他们必须使用公共超文本传输协议库的情况下存在。从应用程序弹出时，您可以控制webpack脚本。

create react应用程序上的安全团队添加了此标题，以通过各种标题（如CORS）劝阻不了解安全性的人，并明确获得您的同意以禁用检查。要了解有关安全标题的更多信息，请在页面底部提供一个指南，您可以链接到标题。

错误发生是因为他们在代码中有一个如果条件，他们检查跨源请求，如果域名不匹配，他们会引发这个错误，并将其视为有人恶意试图访问应用程序，因此他们会阻止请求并执行不是送bundle.js.

我还必须添加代理：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"
  }
}

这是我的公共github回购协议，它正在运行。如果您更改了自己的配置，则可以在config文件夹中查看网页包配置。

如果您使用HTTPS来启用此功能，请遵循我前面提供的文档！如果您正在尝试重新创建create react app自己正在执行的操作，请遵循其开放源代码中的主机标题，您将能够看到他们检查的位置，并提出无效主机标题，并相应地编辑您的配置。

备选方案：

下面是另一个SO问题，它通过更改devServer配置来解决这个问题。他们的修复程序在他们的Web包devServer中如下所示

disableHostCheck: true

或

public: 'dns-here.com'

如果将其与--production标志一起使用，则可能必须禁用主机检查或在prod.webpack中添加默认域。yml或在启动react应用程序时将其作为标志提供，如本期github中所示，建议添加--public your host:8080或许多其他可能的修复程序。

如果这仍然不能解决您的问题，请留下有关问题的评论，我将相应地进行更新。：）