为啥在通过 ngrok 进行隧道传输时会出现 CORS 错误？

Posted 2023-04-18

【中文标题】为啥在通过 ngrok 进行隧道传输时会出现 CORS 错误？

【英文标题】：Why do I get a CORS Error when tunneling through ngrok?为什么在通过 ngrok 进行隧道传输时会出现 CORS 错误？

【发布时间】：2020-06-17 09:39:27

【问题描述】：

我知道这种问题以前已经解决了，但我无法弄清楚为什么它不适合我的情况。

我正在本地开发一个网站，我想在各种平台和设备上对其进行测试，所以我决定为此使用 ngrok。

我的前端在 3000 端口上运行，我的 express 服务器在 5000 端口上运行。

于是我打开ngrok，输入ngrok http 3000

在我运行服务器的本地 PC 上，https://example.ngrok.io 按预期工作，没有任何问题。

但在我的笔记本电脑（或其他设备）上，前端显示正确，但实际上要从后端获取数据时，却显示错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/weather/51.87575912475586,0.9436600208282471. (Reason: CORS request did not succeed).

在我的快递服务器上，我确保使用了 cors 包和app.use(cors());，我还尝试手动添加标题：

app.all('/*', function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
);

来源：Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?

这也是我正在获取和获取数据的代码，以防我在那里做错了什么：

index.js（前端）

const response = await fetch(`http://localhost:5000/weather/$lat,$lng`); //sending request to server-side

const json = await response.json();

console.log(json); //getting the weather data from server-side

server.js（后端）

const express = require("express");
const mongoose = require("mongoose");
const fetch = require("node-fetch");
const cors = require('cors');
const nodemailer = require('nodemailer');
require('dotenv').config();

const users = require('./routes/api/users');

const app = express();


//Json Middleware
app.use(express.json());

app.use(cors());


//Getting URI from keys file
const db = require('./config/keys').mongoURI;


//Connect to the Database
mongoose.set('useUnifiedTopology', true);
mongoose.set('useCreateIndex', true);
mongoose.connect(db, useNewUrlParser: true)
.then(()=> console.log("Database Connected"))
.catch(err=> console.log(err));

//Route for user routes
app.use('/api/users',users);

const dbport = process.env.PORT || 5000;

app.listen(dbport, () => console.log(`Server started on port $dbport`));

app.get('/weather/:latlon', async (req,res) => //awating request from client-side

    const latlon = req.params.latlon.split(',');

    console.log(req.params);

    const lat = latlon[0];
    const lon = latlon[1];

    console.log(lat,lon);

    const api_key = process.env.API_KEY;

    const weather_url = `https://api.darksky.net/forecast/$api_key/$lat,$lon?units=auto`; //getting data from weather API
    const fetch_res = await fetch(weather_url);
    const json = await fetch_res.json();
    res.json(json); //sending weather data back to client-side
);

由于 localhost 的性质，这是否可行？

firefox 和 chrome 都有同样的问题。

感谢您的帮助！

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

嘿@sideshowbarker，感谢您的回复，很抱歉留下此信息。奇怪的是，请求根本没有状态码（此处显示：imgur.com/a/D3BJRkb），然后是控制台中的实际错误（imgur.com/a/XjYeysY）。当我从运行服务器的 PC 对 Postman 执行相同的请求时，请求很好并且通过了，但在我的笔记本电脑中它显示了这一点 (imgur.com/a/hDE34GR)。请注意，我之前还使用 OpenSSL 创建了 SSL 证书以使服务器为 https，但即使从我的本地 PC 也得到完全相同的错误。

【参考方案1】：

经过几天的摸索，我终于找到了解决方案，我将其发布在下面，以供其他可能遇到相同问题的人使用。

第一步：

我没有启用 2 个端口（3000 用于客户端，5000 用于服务器），而是关闭了我的客户端端口并使用 express 直接从我的服务器提供我的客户端文件夹/资产：

const dbport = process.env.PORT || 5000;

app.listen(dbport, () => console.log(`Server started on port $dbport`));

app.use(express.static('client')); //serving client side from express
//Json Middleware
app.use(express.json());

第 2 步：

现在我们为客户端和服务器都有一个端口（端口 5000），我进入我的客户端，在那里我执行了我的获取请求（参见上面的 index.js）并将实际请求修改为相对的：

const response = await fetch(`/weather/$lat,$lng`); //sending request to server-side


const json = await response.json();

console.log(json); //getting the weather data from server-side 

第三步：

最后，我打开 ngrok 并输入：

ngrok http 5000

它现在应该可以工作了。

【讨论】：

您好，感谢您提供有用的信息。对不起，但我还是不明白为什么客户端 web（react）和服务器（expressjs）都有相同的端口（5000）？

不同的端口呢？我的意思是我在端口 8080 上使用后端（php），我不能在同一个端口上使用它。我使用 wampserver 和最新的 Nuxt。

【参考方案2】：

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

删除他的 cors 导入并使用此代码：

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

谢谢。