Angular + Node + Express + Passport + oauth2orize 独特的 CORS 问题

Question

我已经构建了一个用于本地身份验证和 Facebook 身份验证的 API。

我在授权过程中使用 node、express、passport 和 oauth2orize。

我现在通过终端应用程序和 API 测试套件完美地运行 API，但是，当从 Angular 调用我的身份验证端点时，我收到以下信息：

本地授权：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

http://localhost:4200/oauth2/auth
    ?client_id=[CLIENT_ID]
    &redirect_uri=http:%2F%2Flocalhost:4200%2Foauth2%2Fauth%2Fcallback (http://localhost:4200/oauth2/auth/callback)
    &response_type=code.

This can be fixed by moving the resource to the same domain or enabling CORS.

Facebook 身份验证：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

https://www.facebook.com/dialog/oauth
    ?response_type=code
    &redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fauth%2Ffacebook%2Fcallback (http://localhost/auth/facebook/callback)
    &client_id=[CLIENT_ID].

This can be fixed by moving the resource to the same domain or enabling CORS.

我过去遇到过 CORS 问题，并集成了位于 https://www.npmjs.com/package/cors

的 npm 'cors' 中间件模块

CORS 初始化：

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

对于我以前的问题，这已经足够了，但是对于这些新的 CORS 问题，它没有帮助。

我还注意到，在 Firefox 中，如果我单击错误消息，则会打开一个新的对话框窗口，并且服务器会继续正确授权用户。

有人可以帮忙吗？

更新 1：

检查 cmets 以获取调试信息的屏幕截图。

更新 2：

在登录流程中执行的最后 2 个请求的响应标头。

1. 204：

   Access-Control-Allow-Credentials: true
   Connection: keep-alive
   Date: Fri, 06 Feb 2015 15:26:43 GMT
   Vary: Origin
   X-Powered-By: Express
   access-control-allow-headers: authorization
   access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
   access-control-allow-origin: http://localhost:8100
   

2. 302：

   Access-Control-Allow-Credentials: true
   Connection: keep-alive
   Content-Length: 138
   Content-Type: text/plain; charset=utf-8
   Date: Fri, 06 Feb 2015 15:26:43 GMT
   Location: http://localhost:4200/oauth2/auth/callback?code=[CODE_HERE]
   Set-Cookie: connect.sid=[SID_HERE]; Path=/; HttpOnly
   Vary: Origin, Accept
   X-Powered-By: Express
   access-control-allow-origin: http://localhost:8100
   

Answer 1

文档中较早的示例不包括处理预检请求，并且不指定任何来源，如果您想随请求发送任何凭据（例如，您的授权标头），则需要这样做。这是一个例子：

var whitelist = ['https://localhost:4200']; // Acceptable domain names. ie: https://www.example.com
var corsOptions = {
  credentials: true,
  origin: function(origin, callback){
    var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
    callback(null, originIsWhitelisted);
    // callback(null, true); uncomment this and comment the above to allow all
  }
};

// Enable CORS
app.use(cors(corsOptions));
// Enable CORS Pre-Flight
app.options('*', cors(corsOptions));