Question

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

I had my first static site deployed at sea-lion-app-dpidq.ondigitalocean.app . Then I added a React webapp component (after following this tutorial: https://react.dev/learn/tutorial-tic-tac-toe) in the same project. DigitalOcan gave me a new HTTP route to sea-lion-app-dpidq.ondigitalocean.app/forest-visualizer but when I try to access it I get the error “Invalid Host Header”.

When deploying the React component, I did not specify any HTTP requests in anyway as I was crueless how to manually configure it. Many StackExchange websites (ex. https://stackoverflow.com/questions/43619644/i-am-getting-an-invalid-host-header-message-when-connecting-to-webpack-dev-ser) say to fix disableHostCheck, but I do not have any file that specifies the script.

Does anyone know how to fix the issue? Please also let me know if this is not enough information to debug.


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel