Configure ngrok's CORS headers
cors, ngrok, xampp
Solution
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.
Problem
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?