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

Question

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

User · Answer

Option 1  If you do not need to use Authentication you can add configs to ngrok commands     ngrok http 9000 --host-header rewrite    or      ngrok http 9000 --host-header  localhost 9000    But in this case Authentication will not work on your website because ngrok rewriting headers and session is not valid for your ngrok domain  Option 2  If you are using webpack you can add the following configuration  devServer        disableHostCheck  true     In that case Authentication header will be valid for your ngrok domain

User · Answer

If you use webpack devServer the simplest way is to set disableHostCheck  check webpack doc like this devServer        contentBase  path join   dirname     dist        compress  true      host   localhost          host   0 0 0 0       port  8080      disableHostCheck  true   for ngrok

User · Answer

I used this set up in a react app that works  I created a config file named configstrp js that contains the following   module exports     ngrok       use the local frontend port to connect enabled  process env NODE ENV      production   port  process env PORT    3000  subdomain  process env NGROK SUBDOMAIN  authtoken  process env NGROK AUTHTOKEN          Require the file in the server    const configstrp        require    config configstrp js    const ngrok   configstrp ngrok enabled   require  ngrok     null    and connect as such  if  ngrok    console log  If nGronk   ngrok connect            addr  configstrp ngrok port      subdomain  configstrp ngrok subdomain      authtoken  configstrp ngrok authtoken      host header 3000         err  url    gt        if  err           else                         Do not pass a subdomain if you do not have a custom domain

User · Answer

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

[reactjs] Invalid Host Header when ngrok tries to connect to React dev server

Examples related to reactjs

Examples related to localhost

Examples related to ngrok