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

【问题标题】：302 redirect after CORS preflight request to nodejs server302 在 CORS 预检请求到 nodejs 服务器后重定向
【发布时间】：2016-05-03 04:34:53
【问题描述】：

我尝试构建一个平台，它由后端和前端两部分组成。后端由 Express.js 和 Passport.js 提供支持。它可以通过 localhost:3000 获得。前端使用谷歌的 polymer-1.0 并在 localhost:8001 上运行。

我想在我的后端做所有的 API 工作。 Ui 调用并从后端获取数据。

当尝试对我的后端路由进行 Iron-ajax 授权请求时，我收到了 CORS 错误：

XMLHttpRequest 无法加载 http://localhost:3000/auth/facebook。
请求被重定向到'https://www.facebook.com/v2.2/dialog/oauth?response_type=code&redirect_uri=...%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=0815'，
对于需要预检的跨域请求，这是不允许的。

UI sn-p：

铁阿贾克斯 id="登录" 网址="" 方法="获取" headers='{"X-Requested-With": "XMLHttpRequest"}' 句柄-as="json" on-response="hrresponse" debounce-duration="300"> /铁阿贾克斯> _handleTap：函数（）{ var url = 'http://localhost:3000/auth/' + this.service; this.$.login.url = url; this.$.login.generateRequest(); },

后端sn-p：

app.get('/auth/facebook', passport.authenticate('facebook', { scope: 'email' })); app.get('/auth/facebook/callback', passport.authenticate('facebook'), function(req, res) { res.status(200).json({ 成功：是的，消息：'享受吧！', 重定向：'/route/to/nowhere', }）。结尾（）; });

如您所见，我只是使用来自passport.js documenation 的简单 Facebook auth sn-p。

处理了 2 个请求：预检：

回复 HTTP/1.1 200 正常 X-Powered-By: Express 访问控制允许来源：* Access-Control-Allow-Headers：Origin、X-Requested-With、Content-Type、Accept 允许：GET,HEAD 内容类型：文本/html；字符集=utf-8 内容长度：8 ETag：W/“8-8ww6QOmj5lyGjHVKXelZGQ” 日期：格林威治标准时间 2016 年 1 月 26 日星期二 12:59:20 连接：保持活动要求选项 /auth/facebook HTTP/1.1 主机：本地主机：3000 连接：保持活动访问控制请求方法：GET 来源：http://localhost:8001 用户代理：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：接受，x-requested-with 接受： */* DNT: 1 引用者：http://localhost:8001/ 接受编码：gzip、deflate、sdch 接受语言：de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

获取：

回复找到 HTTP/1.1 302 X-Powered-By: Express 访问控制允许来源：* Access-Control-Allow-Headers：Origin、X-Requested-With、Content-Type、Accept 位置：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 内容长度：0 日期：格林威治标准时间 2016 年 1 月 26 日星期二 12:59:20 连接：保持活动要求获取 /auth/facebook HTTP/1.1 主机：本地主机：3000 连接：保持活动接受：应用程序/json 来源：http://localhost:8001 x-requested-with: XMLHttpRequest 用户代理：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 引用者：http://localhost:8001/ 接受编码：gzip、deflate、sdch 接受语言：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; 安德烈

【问题讨论】：

也许你需要在Access-Control-Allow-Origin你的主机名中添加，因为有些浏览器不接受*。还有passport for facebook说Note: For security reasons, the redirection URL must reside on the same host that is registered with Facebook.
@Dmitry 我将我的主机添加到Access-Control-Allow-Origin，但没有改变任何东西。 fb 重定向/回调与请求位于同一 URL（端口）上
你找到解决办法了吗？
很遗憾没有:(
我似乎陷入了几乎相同的情况（同样的问题，但使用的是 passport-auth0 而不是 facebook），我不知道我能做什么。你最后是怎么解决这个问题的？非常感谢

标签： node.js polymer passport.js polymer-1.0

【解决方案1】：

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

这在reply中有很好的解释

【讨论】：

【解决方案2】：

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

将您的 _handleTap 函数更改为：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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();
});

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

【讨论】：

感谢您的 sn-p，我添加了它，但我没有更改任何内容。