1

My website was working fine before I made my most recent changes on my react app. When I deployed the changes, "Invalid Host header" appears on the webpage.

This is my code structure:

enter image description here

What can I configure to make this error go away?

This is my package.json file:

{
  "name": "client",
  "proxy": "http://127.0.0.1:4000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is the log of my pod:

> client@0.1.0 start
> react-scripts start

ℹ ｢wds｣: Project is running at http://10.244.1.23/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view client in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.244.1.23:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Thank you!

Aidenhsy
  • 915
  • 2
  • 13
  • 28
  • Provide details on the changes you made, package.json won't be of any use without that. – Adithya Dec 26 '20 at 08:39
  • Check the value of host header from network panel in the browser. It should be the DNS name of your site. Check logs of your pod(s) to figure out more pointers for troubleshooting. – Sameer Naik Dec 26 '20 at 09:13
  • @SameerNaik Hi Sameer, I uploaded the log of my pod. Do you think there's anything wrong with it? – Aidenhsy Dec 26 '20 at 11:39

1 Answers1

0

So I solved the issue by doing the following steps:

  1. npm run eject in my react app folder.

  2. go to config folder's webpackDevServer.config.js file and change

    disableHostCheck:!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',

to

disableHostCheck: true,
Aidenhsy
  • 915
  • 2
  • 13
  • 28
  • Disabling host header might have some security implications as suggested by name of the environment variable `DANGEROUSLY_DISABLE_HOST_CHECK`. From the original config, it seems that host name checks are disabled if not using proxy OR that env variable is set to true. Were you able to find the value of host name it was complaining about? Please see this as well. https://stackoverflow.com/questions/44064460/invalid-host-header-when-running-create-react-app-on-localhost-subdomain – Sameer Naik Dec 28 '20 at 08:14