Configure ngrok's CORS headers

Question

I am running a local webserver, which runs an XHR request to an ngrok server, also run from my PC.

I'm getting XMLHttpRequest cannot load http://foo.ngrok.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

It appears the ngrok FAQ mentions CORS headers, but only in relation to basic auth - it doesn't mention how to set the headers so I could test my app in development.

How do I change ngrok's CORS options to allow loading requests from localhost?

UPDATE: different use case. BOUNTY FOR THIS SOLUTION:

I am getting the following error:

login.php:1 Access to XMLHttpRequest at 'http://localhost/lagin/public/login.php' from  origin 'http://062b-96-230-240-153.ngrok.io' has been blocked by CORS  policy: The request client is not a secure context and the resource is in more-  private address space `local`.  

I've looked at Configure ngrok's CORS headers but still not sure how to proceed. When I tried ngrok http -host-header=rewrite 80 it says header not defined.

I've looked at 10 or 12 youtube videos and they all do a great job explaining what CORS is but an awful job explaining how to fix it.

I'm running virtualbox on a windows 10 machine and create a linux virtual machine. On the linux side I am running xampp as a local server.

I am happy to provide more details but I just don't know what additional information is needed.

I am able to see the login page of my site on ngrok but as soon as I make a axios call I get the above error.

Also, I tried //flags/#block-insecure-private-network-requests in chrome and set to disable. When I do that I no longer get the error but the site doesn't work.

ADDITIONAL INFORMATION:

I spoke to ngrok and they say: ...it sounds like your app is trying to call localhost somewhere in a ajax request. You will need to adjust that call to ensure it is being routed through ngrok.

here's what I'm doing:

responseData = sendData2('http://localhost/lagin/public/login.php',emailPass); 

and here’s sendData2 (just for completeness)

function sendData2(url,emailPass){      let bodyFormData = new FormData()     for (const [key, value] of Object.entries(emailPass)) {        //console.log(key,value)        bodyFormData.append(key,value)     }      return axios({             method: 'POST',             url: url,             data: bodyFormData,             headers: {'Content-Type': 'multipart/form-data'}             })                 .then(function(response){                     return response.data                 })                 .catch(function(response){                     return response                 }) } 

UPDATE: Each time we tunnel into ngrok we get an address like https://2634-96-230-240-153.ngrok.io If we change the send2() call to

sendData2('http://96-230-240-153.ngrok.io/lagin/public/login.php',emailPass); 

it works but this requires I change the code each time I have a new tunnel. Would adjusting the CORS policy get around this problem?

Answer 1

I just stumbled across this issue today and was able to resolve it by starting ngrok and including the -host-header flag.

ngrok http -host-header=rewrite 3000

From the docs:

Use the -host-header switch to rewrite incoming HTTP requests.

If rewrite is specified, the Host header will be rewritten to match the hostname portion of the forwarding address.

Answer 2

First of all ngrok is just a tunnel and not a server so configuring CORS header in ngrok is not at all possible. So any kind of CORS configuration needs to be done at the server level.

For example if you are using a nginx server, you need to configure header in the nginx conf file like:

location / {     /*some default configuration here*/     add_header 'Access-Control-Allow-Origin' '*'; } 

By adding this header, you say that cross origin access to your address is allowed from any address as the value of the header is '*'. You can also specify a particular address for which the access to your address is allowed by replacing the value.