webpack Invalid Host header when accessing from domain, not when through IP

Question

I have setup a domain name to my server which I have been accessing through the IP for awhile, but now I am trying to access it through the domain name. When I view it from the IP my react app works fine, however when I try through the domain it says "Invalid host header".

In my Webpack I have (and I have tried every variation online to try):

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

While using the create-react-app I also faced a similar problem. I will provide a solution which you can use to solve this, if you are not using create-react-app or have ejected from it which leaves no trace of it being there, I'll give links to the open-source code which fixed this and you can follow along to find the solution.

The solution was to create files called

.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

The create-react-app code is open source and the component that configures these headers is in the react-scripts npm dependency in package.json The code is open sourced here.

Here is the Github issue that I(devssh) was part of which solved this problem

Here is the proper documentation for what you should do.

The reason I know that someone used create-react-app or ejected from it when creating your project is that the error you mentioned Invalid host header is only there in this scenario where they must be using common http libraries. On ejecting from the app, you gain control of your webpack scripts.

The security team on the create-react-app added this header to dissuade people who don't understand security via the various headers like CORS, as well as to explicity gain consent from you to disable the check. To learn more about security headers here is a guide at the bottom of page, you have links to headers.

The error happens because they have an if condition in their code where they check for cross-origin requests and if the domain name does not match, they raise this error and treat it as someone maliciously trying to access the app, therefore they block the request and do not send bundle.js.

I also had to add "proxy": "http://0.0.0.0:8080", to my package.json. Here is my full 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 is my public github repo which is working. You can view the webpack configuration inside the config folder, if you have changed your own significantly breaking something.

Also follow the documentation I provided earlier if you are using HTTPS to enable that! If you are trying to recreate what create-react-app is doing on your own, following the HOST header in their open source code, you will be able to see the place they check and raise the Invalid Host header and edit your config accordingly.

Alternate:

Here is another SO issue, that solves the problem by changing their devServer config. Their fix was the following in their webpack devServer

disableHostCheck: true

or

public: 'dns-here.com'

If you are using it with the --production flag, you may have to disable the host check or add the domain as your default in your prod.webpack.yml or supply it as a flag while starting react app as shown in this github issue which suggests adding --public your-host:8080 or many other potential fixes.

If this still does not fix your problem, leave a comment with the problem and I'll update accordingly. :)