"Invalid Host header" Kubernetes cluster on Digital Ocean with React - reactjs

Question

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:
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!

Answer 1

So I solved the issue by doing the following steps:
npm run eject in my react app folder.
go to config folder's webpackDevServer.config.js file and change
disableHostCheck:!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
to
disableHostCheck: true,