Invalid Host Header when ngrok tries to connect to React dev server

reactjs localhost ngrok
Patrick Connors picture Patrick Connors · Jul 31, 2017 · Viewed 99.5k times · Source

I'm trying to test my React application on a mobile device. I'm using ngrok to make my local server available to other devices and have gotten this working with a variety of other applications. However, when I try to connect ngrok to the React dev server, I get the error:

Invalid Host Header

I believe that React blocks all requests from another source by default. Any thoughts?

Answer

textual picture textual · Aug 3, 2017

I'm encountering a similar issue and found two solutions that work as far as viewing the application directly in a browser

ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

obviously replace 8080 with whatever port you're running on

this solution still raises an error when I use this in an embedded page, that pulls the bundle.js from the react app. I think since it rewrites the header to localhost, when this is embedded, it's looking to localhost, which the app is no longer running on

Related questions

React tutorial - how do I start the node server for a reactJs application?

I'm just starting the react.js tutorial, I've downloaded the files and then it mentions: "Follow your progress by opening http://localhost:3000 in your browser (after starting the server). " I know this may sound stupid, (bear with me since I'm …

Read More
React-router v4 - cannot GET *url*

I started to use react-router v4. I have a simple <Router> in my app.js with some navigation links (see code below). If I navigate to localhost/vocabulary, router redirects me to the right page. However, when I …

Read More
How to listen to localstorage in react.js

I'm having a problem with a component that gets data from an array in localstorage. It gets the initial data when the page loads, but how do I update when localstorage is changed? import React, {Component} from 'react'; class MovieList …

Read More