Adding proxy to package.json produces "Invalid Host header"

Glitch Help
1

I have an app using React and Express so, following the advice of multiple different blog posts around the web, I’ve put the React stuff into its own subdirectory and given it its own package.json, where I add the following line:

"proxy": "http://localhost:3001"

(3001 being the port Express is listening on.)

With that line in there, instead of my app, I see a blank page except for the text “Invalid Host header”. I’m guessing that this is because the generic advice I’ve found online doesn’t work for the way Glitch projects are set up. Anyone know what I can change so my React code can access endpoints on my Express server?

Thanks!
Garann

2

When I’ve used such a setup I’ve found setting the proxy to the Glitch project URL works e.g. "proxy":"https://project-name.glitch.me"

3

Thanks, @Gareth! I thought I’d tried that, but I just double-checked and the error remains. I’ve also tried “http://0.0.0.0:3001” and “http://127.0.0.1:3001”, but so far no dice. Do you happen to know any other aliases I’m missing?

4

Ah ok - you can try just removing the ‘proxy’ field from the client package.json, that also works for me.

Also DANGEROUSLY_DISABLE_HOST_CHECK=true in your env will make it work but obviously isn’t recommended.

5

That’s an intriguing environment setting! I’ll keep it in mind for next time, but as you pointed out, removing the proxy from package.json removes the error. I didn’t realize it would work just fine to fetch('https://app-name.glitch.me:3001/endpoint') within my React code. I’m doing that now and have been able to get things moving again. Thanks very much for your help!