配置 ngrok 的 CORS 标头

Question

我正在运行一个本地网络服务器，它向 ngrok 服务器运行 XHR 请求，也是从我的 PC 运行的。

我越来越

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

.

ngrok 常见问题解答似乎提到了 CORS 标头，但仅与基本身份验证有关 - 它没有提到如何设置标头，因此我可以在开发中测试我的应用程序。

如何更改 ngrok 的 CORS 选项以允许从本地主机加载请求？

更新：不同的用例。此解决方案的赏金：

我收到以下错误：

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`. 

我查看了配置 ngrok 的 CORS 标头，但仍不确定如何进行。当我尝试 ngrok http -host-header=rewrite 80 时，它说标头未定义。

我看过 10 或 12 个 youtube 视频，它们都很好地解释了 CORS 是什么，但解释如何修复它却很糟糕。

我在 windows 10 机器上运行 virtualbox 并创建一个 linux 虚拟机。在 Linux 方面，我将 xampp 作为本地服务器运行。

我很乐意提供更多细节，但我只是不知道还需要什么额外信息。

我可以在 ngrok 上看到我网站的登录页面，但是一旦我进行 axios 调用，我就会收到上述错误。

此外，我在 chrome 中尝试了 //flags/#block-insecure-private-network-requests 并设置为禁用。当我这样做时，我不再收到错误，但该网站无法正常工作。

附加信息：

我与 ngrok 交谈，他们说：...听起来您的应用程序正试图在 ajax 请求中的某处调用

localhost

。您将需要调整该调用以确保它通过 ngrok 路由。

这是我在做什么：

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

这里是 sendData2（只是为了完整性）

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
                })
}

更新：每次我们进入 ngrok 时，我们都会得到一个类似 https://2634-96-230-240-153.ngrok.io 的地址 如果我们将 send2() 调用更改为

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

它有效，但这需要我每次有新隧道时更改代码。调整 CORS 政策会解决这个问题吗？

Answer 1

我今天偶然发现了这个问题，并且能够通过启动

ngrok

并包括

--host-header

标志来解决它。

ngrok http --host-header=rewrite 3000

来自文档：

使用

--host-header

开关重写传入的 HTTP 请求。

如果指定重写，Host 头将被重写以匹配 转发地址的主机名部分。

Answer 2

首先，ngrok 只是一个隧道而不是服务器，因此根本不可能在 ngrok 中配置 CORS 标头。所以任何类型的 CORS 配置都需要在服务器级别完成。

例如，如果您使用的是 nginx 服务器，则需要在 nginx conf 文件中配置标头，例如：

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

通过添加此标头，您表示允许从任何地址跨源访问您的地址，因为标头的值为“*”。您还可以通过替换值指定允许访问您的地址的特定地址。

Answer 3

对我来说，除了设置服务器，你还需要在客户端发送的每个请求上添加到头部

"ngrok-skip-browser-warning": true

Answer 4

对于 Webpack / React，我使用了“请求式”Chrome 扩展程序并从 Bypass CORS 模板中设置了一条规则。请注意，在选择 Templates > Bypass CORS 后，您需要单击对话框右上角的 Create Rule。 然后填写顶部的部分，“如果域包含

Answer 5

如果您将 ngrok 与 nodejs/express.js 一起使用。

使用此代码：

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match 
the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content- 
Type, Accept");
next();
});

将“YOUR-DOMAIN.TLD”替换为“*”以访问所有网址或您的特定网站网址。

参考https://enable-cors.org/server_expressjs.html了解更多详情

Answer 6

你应该把这个添加到你的标题中然后 100% 工作：

headers: { Origin: window.location.origin, },

Answer 7

让 ngrok 工作花了一点时间才弄清楚，但实际上很容易。

In chrome there is an option to turn off CORS.  In the chrome address bar go to
chrome://flags and look for Block insecure private network requests.
This needs to be disabled.

Second, in my ajax request I had used an absolute path and this needed to be changed 
to a relative path.  

记住：这是为了运行本地主机并将其暴露给网络