NodeJS 为什么在通过ngrok隧道时会出现CORS错误?

weylhg0b  于 2023-05-17  发布在  Node.js
关注(0)|答案(3)|浏览(140)

我知道这种问题以前已经解决过,但我不知道为什么它不适合我的情况。
我正在本地开发一个网站,我想在各种平台和设备上测试它,所以我决定使用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).
在我的express服务器上,我确保使用了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的性质,这是否可能工作?
火狐和Chrome都有同样的问题。
谢谢你的帮助!

umuewwlo

umuewwlo1#

经过几天的挠头,我终于找到了一个解决方案,我张贴在下面的其他人可能有同样的问题。
第一步:
而不是有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());

第二步:
现在我们有一个端口(端口5000)用于客户端和服务器,我进入我的客户端,在那里我做了我的fetch请求(见上面的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

现在应该可以了。

ny6fqffe

ny6fqffe2#

解决通过ngrok隧道时的CORS错误。在调用服务器之前,必须在客户端的标头中附加以下内容。

headers : { 
  'ngrok-skip-browser-warning':true
}
imzjd6km

imzjd6km3#

如果你使用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”替换为“*”给予所有URL或您的特定网站URL。
有关详细信息,请参阅https://enable-cors.org/server_expressjs.html
谢谢你。

相关问题