vue.js 后端和前端在不同端口上运行，CORS错误

eoxn13cs 于 2023-08-07 发布在 Vue.js

关注(0)|答案(4)|浏览(285)

我在不同的端口（8000，8001）上运行后端和前端，我无法从Express服务器进行res.redirect（...），浏览器显示CORS错误（Access to XMLHttpRequest at...）。
这是MEVN（Mongo，Express，Vue，Nodejs）应用程序，Vue前端和Express（nodejs）后端运行在不同的端口上。我在后端实现了cors（），它使我的前端可以发出请求（get，post），但后端仍然不能重定向前端页面，使用res.redirect（“...”），因为它显示CORS错误。

// Backend
var cors = require('cors');
app.use(cors())
...
function (req, res, next){  // some middleware on backend
  ...
res.redirect('http://urltofrontend');  // cause error

// Error msg on Chrome
Access to XMLHttpRequest at 'http://localhost:8001/' (redirected from 
'http://localhost:8000/api/login') from origin 'null' has been blocked 
by CORS policy: Request header field content-type is not allowed by 
Access-Control-Allow-Headers in preflight response.

字符串
我已经实现了cors（），它允许我的前端向我的后端发出http请求，它工作得很好。但是，来自后端的res.redirect（...）被CORS错误阻止。

vue.js

来源：https://stackoverflow.com/questions/54531235/backend-and-frontend-running-on-different-port-cors-error

4条答案

按热度按时间

bvn4nwqk1#

要解决浏览器中的CORS错误，您应该将以下HTTP头添加到响应：

Access-Control-Allow-Headers: Content-Type

字符串
可以通过添加以下代码来实现：

app.use(cors({
  'allowedHeaders': ['Content-Type'],
  'origin': '*',
  'preflightContinue': true
}));

型

赞(0）回复(0）举报 2023-08-07

2eafrhcq2#

只是我的两分钱…
如果您正在处理身份验证调用并为此使用Cookie，则应配置CORS。为此，你必须记住：
1.允许前端为AllowedOrigin
1.将allowCredentials设置为true。
1.不要对AllowedOrigin使用通配符（*）（同样，如果您正在处理cookie/身份验证）。使用protocol、host和portWhy(https://stackoverflow.com/a/19744754/4848859)。
一个Golang示例（使用gorilla/handler）：

handlers.CORS(
    // allowCredentials = true
    handlers.AllowCredentials(),
    // Not using TLS, localhost, port 8080 
    handlers.AllowedOrigins([]string{"http://localhost:8080"}),
    handlers.AllowedMethods([]string{"GET", "POST", "PUT", "HEAD", "OPTIONS"}),
    handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"}),
)

字符串

赞(0）回复(0）举报 2023-08-07

xoshrz7s3#

使用CORS中间件，如

var enableCORS = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, token, Content-Length, X-Requested-With, *');
  if ('OPTIONS' === req.method) {
    res.sendStatus(200);
  } else {
    next();
  }
};
app.all("/*", function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, token, Content-Length, X-Requested-With, *');
  next();
});
app.use(enableCORS);

字符串

赞(0）回复(0）举报 2023-08-07

ivqmmu1c4#

所以我一直有这个问题，后端和前端在不同的端口和阻塞对方的请求。
对我来说有效的解决方案是设置后端的前端代理：Medium article的数据。
待办事项：将"proxy":<backend_server_link>添加到前端文件夹的package.json中。

赞(0）回复(0）举报 2023-08-07