How to fix "Invalid Host Header" for a React component

Hey Yutaro 👋,

If you’re using webpack-dev-server locally for development, you need to configure it to allow requests from your DigitalOcean subdomain by setting allowedHosts in the Webpack configuration file.

Create or update your webpack.config.js (if it doesn’t already exist) and add the following under the devServer configuration:

module.exports = {
  // ...other webpack config
  devServer: {
    allowedHosts: ['sea-lion-app-dpidq.ondigitalocean.app'],
  },
};

This tells the dev server to accept requests from your DigitalOcean domain.

If you’re using Create React App (CRA), you may not have direct access to the webpack.config.js file. In that case, you can set the HOST environment variable to match your domain:

• Add a .env file in the root of your project (if it doesn’t exist) and include the following:

  HOST=sea-lion-app-dpidq.ondigitalocean.app
  

Then try again.

Since you’re deploying the app on DigitalOcean, the error could also appear if you’re serving the app with Webpack’s dev server instead of a production server like Nginx. Make sure you’re using npm run build to create a production build, and then deploy the static files to DigitalOcean’s App Platform or Spaces.

• If using DigitalOcean App Platform, check that your app is built for production using:

  npm run build
  

Then deploy the generated build folder instead of running it with Webpack’s development server.

That is the recommended way to serve a React app in production rather than using the development server.

As a last resort, you can disable the host check. However, this is not recommended for production environments as it weakens security. To do this with Create React App:

• Add the following to your .env file:

  DANGEROUSLY_DISABLE_HOST_CHECK=true
  

\— Bobby