最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

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

IT培训 admin 4浏览 0评论

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

我在不同的端口(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请求,并且运行良好。但是,后端的res.redirect(...)被CORS错误阻止。

回答如下:

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

Access-Control-Allow-Headers: Content-Type

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

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

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

我在不同的端口(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请求,并且运行良好。但是,后端的res.redirect(...)被CORS错误阻止。

回答如下:

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

Access-Control-Allow-Headers: Content-Type

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

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

评论列表 (0)

  1. 暂无评论