Configure ngrok's CORS headers
<p>I am running a local webserver, which runs an XHR request to an ngrok server, also  run from my PC.</p>
<p>I'm getting <code>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</code>.</p>
<p>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.</p>
<p>How do I change ngrok's CORS options to allow loading requests from localhost?</p>
<p>UPDATE:  different use case.  BOUNTY FOR THIS SOLUTION:</p>
<p>I am getting the following error:</p>
<pre><code>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`. 
</code></pre>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>I am happy to provide more details but I just don't know what additional information is needed.</p>
<p>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.</p>
<p>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.</p>
<p>ADDITIONAL INFORMATION:</p>
<p>I spoke to ngrok and they say: ...it sounds like your app is trying to call <code>localhost</code> somewhere in a ajax request. You will need to adjust that call to ensure it is being routed through ngrok.</p>
<p>here's what I'm doing:</p>
<pre><code>responseData = sendData2('http://localhost/lagin/public/login.php',emailPass);
</code></pre>
<p>and here’s sendData2 (just for completeness)</p>
<pre><code>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
                })
}
</code></pre>
<p>UPDATE:  Each time we tunnel into ngrok we get an address like <a href="https://2634-96-230-240-153.ngrok.io" rel="nofollow noreferrer">https://2634-96-230-240-153.ngrok.io</a>  If we change the send2() call to</p>
<pre><code>sendData2('http://96-230-240-153.ngrok.io/lagin/public/login.php',emailPass);
</code></pre>
<p>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?</p>