为什么在通过 ngrok 建立隧道时会出现 CORS 错误?
Why do I get a CORS Error when tunneling through ngrok?
我知道这种问题以前已经解决了,但我不明白为什么它对我的情况不起作用。
我在本地网站上工作,我想在各种平台和设备上测试它,所以我决定为此使用 ngrok。
我的 front-end 是 运行 在端口 3000 上,我的 express 服务器在端口 5000 上。
于是我打开ngrok输入ngrok http 3000
在我的本地 PC 上,服务器是 运行,https://example.ngrok.io
按预期工作,没有任何问题。
但是在我的笔记本电脑(或其他设备)上,front-end 显示正确,但是当它实际要从 back-end 获取数据时,它显示错误: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());
我还尝试手动添加 headers :
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 (front-end)
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 (back-end)
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
});
由于本地主机的性质,这是否可行?
firefox 和 chrome 都有同样的问题。
感谢您的帮助!
经过几天的摸索,我终于找到了解决方案,我将其发布在下面,以供可能遇到相同问题的其他人使用。
第 1 步:
我没有激活 2 个端口(客户端 3000 个,服务器 5000 个),而是关闭了客户端端口并使用 express 直接从我的服务器为客户端 folder/assets 提供服务:
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
第 3 步:
最后,我打开 ngrok 并输入:
ngrok http 5000
现在应该可以了。
如果您将 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了解更多详情
谢谢。
我知道这种问题以前已经解决了,但我不明白为什么它对我的情况不起作用。
我在本地网站上工作,我想在各种平台和设备上测试它,所以我决定为此使用 ngrok。
我的 front-end 是 运行 在端口 3000 上,我的 express 服务器在端口 5000 上。
于是我打开ngrok输入ngrok http 3000
在我的本地 PC 上,服务器是 运行,https://example.ngrok.io
按预期工作,没有任何问题。
但是在我的笔记本电脑(或其他设备)上,front-end 显示正确,但是当它实际要从 back-end 获取数据时,它显示错误: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());
我还尝试手动添加 headers :
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 (front-end)
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 (back-end)
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
});
由于本地主机的性质,这是否可行?
firefox 和 chrome 都有同样的问题。
感谢您的帮助!
经过几天的摸索,我终于找到了解决方案,我将其发布在下面,以供可能遇到相同问题的其他人使用。
第 1 步:
我没有激活 2 个端口(客户端 3000 个,服务器 5000 个),而是关闭了客户端端口并使用 express 直接从我的服务器为客户端 folder/assets 提供服务:
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
第 3 步:
最后,我打开 ngrok 并输入:
ngrok http 5000
现在应该可以了。
如果您将 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了解更多详情
谢谢。