“Invalid Host Header” Errors when running your React project off your cloud ide

Posted on

This one was a pain. So your react app is hosted on localhost:3000 and your node backend is on localhost:3001. This isn’t a problem if you a developing locally. You open up your browser and everything connects perfectly. But if you are developing on a cloud ide or vps, you are probably connecting to something like someweirdname.cloudidename.com.

By itself, running npm start will give you your project nicely. But once you have a backend that your browser isnt accessing locally, you might get the dreaded  “Invalid Host Header”

Here is how I fixed my problem:

File: package.json  add the following:  where the value is your ide host name

"proxy": "http://mybackend.mycloudidehost.c9.io"

.env.development.local <- thats DOT ENV DOT DEVELOPMENT DOT LOCAL , I spent a good while troubleshooting because of the missing DOT,  add the following:

DANGEROUSLY_DISABLE_HOST_CHECK=true

The above is not recommended if you are developing locally, but its a cloud ide.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s