![](/img/trans.png)
[英]ReactJS sent GET request, responded with 302 redirect, received CORS error
[英]302 redirect after CORS preflight request to nodejs server
我尝试构建一个平台,它由2个独立的部分组成,即后端和前端。 后端由Express.js和Passport.js提供支持。 它可以通过localhost:3000获得。 前端使用Googles polymer-1.0并在localhost:8001上运行。
我想在我的后端做所有API的东西。 Ui从后端调用并获取数据。
当我尝试对我的后端路由执行iron-ajax请求时,我收到一个CORS错误:
XMLHttpRequest cannot load http://localhost:3000/auth/facebook. The request was redirected to 'https://www.facebook.com/v2.2/dialog/oauth?response_type=code&redirect_uri=…%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=0815', which is disallowed for cross-origin requests that require preflight.
UI片段:
iron-ajax id="login" url="" method="GET" headers='{"X-Requested-With": "XMLHttpRequest"}' handle-as="json" on-response="hresponse" debounce-duration="300"> /iron-ajax> _handleTap: function () { var url = 'http://localhost:3000/auth/' + this.service; this.$.login.url = url; this.$.login.generateRequest(); },
后端片段:
app.get('/auth/facebook', passport.authenticate('facebook', { scope: 'email' })); app.get('/auth/facebook/callback', passport.authenticate('facebook'), function(req, res) { res.status(200).json({ success: true, message: 'Enjoy!', redirect: '/route/to/nowhere', }).end(); });
如您所见,我只是使用来自passport.js文档的简单Facebook auth片段。
有2个请求继续:PREFLIGHT:
RESPONSE HTTP/1.1 200 OK X-Powered-By: Express Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept Allow: GET,HEAD Content-Type: text/html; charset=utf-8 Content-Length: 8 ETag: W/"8-8ww6QOmj5lyGjHVKXelZGQ" Date: Tue, 26 Jan 2016 12:59:20 GMT Connection: keep-alive REQUEST OPTIONS /auth/facebook HTTP/1.1 Host: localhost:3000 Connection: keep-alive Access-Control-Request-Method: GET Origin: http://localhost:8001 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36 Access-Control-Request-Headers: accept, x-requested-with Accept: */* DNT: 1 Referer: http://localhost:8001/ Accept-Encoding: gzip, deflate, sdch Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
得到:
RESPONSE HTTP/1.1 302 Found X-Powered-By: Express Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept Location: https://www.facebook.com/v2.2/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=0815 Content-Length: 0 Date: Tue, 26 Jan 2016 12:59:20 GMT Connection: keep-alive REQUEST GET /auth/facebook HTTP/1.1 Host: localhost:3000 Connection: keep-alive accept: application/json Origin: http://localhost:8001 x-requested-with: XMLHttpRequest User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36 DNT: 1 Referer: http://localhost:8001/ Accept-Encoding: gzip, deflate, sdch Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
我的node.js服务器也接受CORS请求
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
当使用localhost:3000 / auth / facebook作为链接时,我从后端和端口3000获得了我的json响应,但这不是我想要的。
是否有可能通过自己的API接口处理此类API请求,如我的? 目前我看到这里有一个很棒的表演。
谢谢&BR; 安德烈
我认为这个问题与重定向和CORS有关。 状态代码为301,302,303,307或308的重定向将导致错误。 这已被更改,但是现在您需要一种解决方法,例如在响应标头或正文中发回重定向URL,而不使用重定向。
这个答复很好地解释了这一点
用户通过Facebook进行身份验证的唯一方法是,您实际上是将用户发送到Facebook。 执行XMLHttpRequest将无法正常工作,因为用户无法登录其Facebook帐户,批准您的应用程序等。您必须实际重定向用户的浏览器。
将_handleTap
函数更改为:
_handleTap: function () {
var url = 'http://localhost:3000/auth/' + this.service;
window.location = url
}
您需要以这种方式将此中间件添加到您的所有请求中
app.all('/*', function(req, res, next) { res.header('Access-Control-Allow-Origin', req.headers.origin || '*'); res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS'); res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with'); next(); });
此错误基本上意味着,服务器不接受跨源请求(来自其他域的请求)。 在express.js中,您可以使用中间件来使服务器执行此操作。
var cors = require('cors');
app.use(cors());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.