[英]cors vue frontend and express backend
My frontend :8080
and my backend :8081
are running on the same computer http://192.168.178.20
.我的前端
:8080
和我的后端:8081
在同一台计算机上运行http://192.168.178.20
。 If I navigate to http://localhost:8080
on my computer everything works fine (I can successfully send requests to my backend).如果我在我的计算机上导航到
http://localhost:8080
一切正常(我可以成功地向我的后端发送请求)。 When I navigate from my smartphone to http://192.168.178.20:8080
, the frontend will be displayed as intended.当我从智能手机导航到
http://192.168.178.20:8080
,前端将按预期显示。 But I can not send requests from my smartphone to the backend, it think it has to do with the cors configuration but I could not figure it out how to change it correctly.但是我无法从智能手机向后端发送请求,它认为这与 cors 配置有关,但我无法弄清楚如何正确更改它。
Do I have to whitelist my smartphone in some way on the backend?我是否必须在后端以某种方式将我的智能手机列入白名单? How does a proper configuration look, when I want to run this in production and not in development mode?
当我想在生产中而不是在开发模式下运行它时,正确的配置看起来如何?
The smartphones private ip address (same network as computer) is 192.168.178.21
.智能手机的私有 IP 地址(与计算机相同的网络)是
192.168.178.21
。
My current backend configuration looks like this:我当前的后端配置如下所示:
import cors from 'cors';
import express from 'express';
import cookieParser from 'cookie-parser';
const SERVER_PORT = 8081;
const app = express();
app.use(cors({
origin: ['http://localhost:8080'],
credentials: true
}));
app.use(express.urlencoded({
extended: true
}));
app.use(express.json());
app.use(cookieParser());
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'x-access-token, Origin, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
next();
});
// my routes ...
app.listen(SERVER_PORT, () => {
console.log(`Backend is listening on port ${SERVER_PORT}`);
});
Thanks in advance.提前致谢。
From your smartphone, the origin is http://192.168.178.20:8080
, but in your CORS configuration you allow only http://localhost:8080
.从您的智能手机,来源是
http://192.168.178.20:8080
,但在您的 CORS 配置中,您只允许http://localhost:8080
。 Try尝试
app.use(cors({
origin: ['http://localhost:8080', 'http://192.168.178.20:8080'],
allowedHeaders: 'x-access-token',
methods: 'GET, POST, PUT, DELETE, OPTIONS',
credentials: true
}));
and remove the (redundant) middleware that explicitly sets the Access-Control-Allow-*
headers.并删除显式设置
Access-Control-Allow-*
标头的(冗余)中间件。 ( Origin, Content-Type, Accept
need not be set as allowed headers, they are always allowed, unless you mean, eg, Content-Type: application/json
.) (
Origin, Content-Type, Accept
不需要设置为允许的标头,它们总是被允许的,除非你的意思是,例如Content-Type: application/json
。)
The IP address of the client (your smartphone) does not matter, only the address and host of the frontend server.客户端(您的智能手机)的 IP 地址无关紧要,重要的是前端服务器的地址和主机。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.