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

Question

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

在我的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-scriptsNPM依赖于的package.json的代码是开放的来源在这里。

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

这是您应该做什么的正确文档。

我知道有人在创建项目时使用了 create-react-app 或从中弹出的原因是，您提到的错误Invalid host header仅在这种情况下出现，他们必须使用常见的 http 库。从应用程序中弹出时，您可以控制 webpack 脚本。

create-react-app 上的安全团队添加了此标头，以通过 CORS 等各种标头劝阻不了解安全性的人，并明确获得您的同意以禁用检查。要了解更多关于安全头部这里是在页面底部的指南，你有联系的头。

发生错误是因为他们的代码中有一个 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"
  }
}

这是我正在运行的公共 github 存储库。你可以在 config 文件夹中查看webpack 配置，如果你改变了你自己的显着破坏某些东西。

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

备用：

这是另一个 SO 问题，它通过更改其 devServer 配置来解决问题。他们的修复是在他们的 webpack devServer 中的以下内容

disableHostCheck: true

或者

public: 'dns-here.com'

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

如果这仍然不能解决您的问题，请对问题发表评论，我会相应地更新。:)