Angular 5/Express/CORS 与 Facebook OAuth答案

【问题标题】：Angular 5/Express/CORS with Facebook OAuthAngular 5/Express/CORS 与 Facebook OAuth
【发布时间】：2018-10-01 09:04:48
【问题描述】：

所以我在让我的 MEAN 堆栈应用程序使用 PassportJS 向 Facebook 提供 oauth 时遇到问题。也就是说，我不知道如何让 CORS 在应用程序的 Angular 端工作。

在我的应用程序中，角度应用程序通过面向用户的点击操作发送获取请求：

<button (click)="onFacebookLogin()" class="loginBtn loginBtn-facebook"> 
    <span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</button>

这最终导致我的 loginService 中的这个 get 请求：

facebookLoginUser(): Observable <User> {
  return this.http.get('users/auth/facebook')
}

这当然会带我到使用 passport.js 的路线：

// This part is in a 'users' module which is why you don't see 'users' prepend the route
router.get('/auth/facebook', passport.authenticate('facebook', {
    scope: ['email', 'photos']
}))

现在这段代码从 Facebook 返回一个错误，说“照片”是一个不正确的范围（我稍后会解决这个问题）。我的问题是该请求没有向我的服务器传递错误，而是将错误（我假设最终对象）传递给 Angular 应用程序（我在浏览器控制台中看到错误）。浏览器自然会抱怨这一点，因为 facebook 试图根据它没有发起的请求与它通信 (cors)。我的问题是，我该如何解决这个问题？

来自this SO 问题的建议说我必须导航到我需要导航到我发出请求的页面的建议。我已经尝试使按钮成为带有锚元素和 href 的链接，但这不起作用。这个问题也使用了 angular.js，我不认为为我的路由器提供新路由并创建一个全新的视图似乎非常谨慎。除此之外，我仍然觉得 Facebook 会将用户返回到 Angular 应用程序，而不是我想要的快速应用程序。有没有人知道我应该怎么做？

更新错误代码

Failed to load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email%2Cphotos&client_id=2087173708182970: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

【问题讨论】：

很繁琐的描述。您在浏览器控制台中看到的实际错误是什么？为什么你认为你需要在 Angular 应用程序中配置一些与 CORS 相关的东西？ CORS 实际上是服务器和浏览器之间的协商，它不需要您以某种方式配置客户端应用程序。
对不起，如果我不够清楚，我已经用浏览器提供的错误更新了问题。
我认为这是 cors 的问题，因为提供给我的错误以及我查找的其他问题导致相信它与 cors 有关。我查找的另一个问题是我的服务器通过 302 重定向到 facebook 响应我的 angular 应用程序。我已经在 devtools 网络选项卡中确认了这一点。我相信 facebook 会响应这个重定向（到我的 angular 应用程序），而不是针对我的 express 应用程序。我想知道该怎么办
好吧，如果您认为它与 CORS 有关，那么您需要提供与此调用相关的所有浏览器-服务器通信。 302 实际上可以在 CORS 协商的某些阶段被禁止。
它看起来像是针对您的服务器（除非您在端口 3000 中有 Angular 应用程序）。尝试ngrok 并将您的 Facebook 回调 URI 设置为您的 Ngrok URL。查找ngrok

标签： node.js angular facebook passport.js passport-facebook

【解决方案1】：

正如 CBroe 所评论的那样，我用来拨打电话的方法是错误的，因为它不能以 ahax-y 的方式执行。我最终使用了一个带有target=_blank 属性的锚标记，其href 直接指向我的后端护照facebook oauth 路由。所以是这样的：

<a href="http://localhost:3000/users/auth/facebook" target="_blank" class="loginBtn loginBtn-facebook">
    <span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>| Login with Facebook
</a>

现在一切正常

【讨论】：