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

Question

我在不同的端口（80008001）上运行后端和前端，无法从express服务器生成res.redirect（…），并且浏览器显示CORS错误（访问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（），它允许我的前端向我的后端发出超文本传输协议请求，并且运行良好。但是，后端的res.redirect（…）被CORS错误阻止了。

Answer 1

使用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 2

只是我的两分钱…

1. 允许前端为AlloweOrigin
2. 将lowCreentals设置为true。
3. 不要为AlloweOrigin使用通配符（*）（同样，如果您正在处理cookie/身份验证）。使用协议、主机和端口[为什么]。

Golang示例(使用gorilla/handlers):

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 3

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

Access-Control-Allow-Headers: Content-Type

您可以通过添加以下代码来执行此操作：

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