Question

我在不同的端口（8000,8001）上运行后端和前端，我无法从快速服务器生成res.redirect（...），并且浏览器显示CORS错误（访问XMLHttpRequest处...）

这是MEVN（Mongo，Express，Vue，Nodejs）应用程序，Vue前端和express（nodejs）后端在不同的端口上运行。我在后端实现了cors（），这使我的前端可以发出请求（获取，发布），但是后端仍然无法使用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请求，并且运行良好。但是，CORS错误阻止了后端的res.redirect（...）。

Answer 1

要解决浏览器中的CORS错误，应在响应中添加以下HTTP标头：

Access-Control-Allow-Headers: Content-Type

您可以通过添加以下代码来做到这一点：

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

Answer 2

使用类似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);

Answer 3

我的两分钱...

如果要处理身份验证调用并为此使用cookie，则应配置CORS。为此，您必须记住：

允许前端为AllowedOrigin
将allowCredentials设置为true。
请勿对AllowedOrigin使用通配符（*）（同样，如果要处理Cookie /身份验证，则使用通配符）。使用protocol，host和port [Why]。

一个Golang示例（使用大猩猩/处理程序）：

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"}),
)

Answer 4

所以我一直在后端和前端在不同端口上遇到此问题，并阻塞了彼此的请求。
对我有用的解决方案是将后端代理设置为Medium article。

待办事项：将"proxy":<backend_server_link>添加到前端文件夹的package.json中。

后端和前端在不同的端口上运行，CORS错误

4 个答案: