Question

我尝试构建一个平台，它由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 documenation中的简单Facebook身份验证片段。

有2个请求继续进行：预检：

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

GET：

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请求，如我的？目前我在这里看到一个很大的节目塞。

谢谢＆amp; BR; 安德烈

Answer 1

我认为这个问题与重定向和CORS有关。状态代码为301,302,303,307或308的重定向将导致错误。这一过程正在改变，但是现在您需要一种解决方法，例如在响应标头或正文中发回重定向网址，而不使用重定向。

这在reply

中有详细解释

Answer 2

用户通过Facebook进行身份验证的唯一方法是，您实际上是将用户发送到Facebook。执行XMLHttpRequest将无法正常工作，因为用户无法登录其Facebook帐户，批准您的应用程序等。您必须实际重定向用户的浏览器。

将您的_handleTap功能更改为：

_handleTap: function () {
  var url = 'http://localhost:3000/auth/' + this.service;
  window.location = url     
}

Answer 3

您需要以这种方式将此中间件添加到您的所有请求中

request_store

就像这里解释How to allow CORS in Express/Node.js?

一样

Answer 4

此错误基本上意味着，服务器不接受跨源请求（来自其他域的请求）。在express.js中，您可以使用中间件来使服务器执行此操作。

var cors = require('cors');
app.use(cors());

在CORS预检请求到nodejs服务器之后302重定向

4 个答案: