Angular 5/Express/CORS with Facebook OAuth



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

在我的应用程序中,角度应用程序通过面向用户的单击操作发送 get 请求:

<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>

这最终导致我的登录服务中的此 get 请求:

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

这当然会带我到使用护照的路线.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返回一个错误,说"照片"是一个不正确的范围(我将在后面解决)。我的问题是该请求没有向我的服务器传递错误,而是将错误(我假设最终对象)传递给角度应用程序(我在浏览器控制台中看到错误)。浏览器自然会抱怨这一点,因为Facebook正试图根据它没有发起的请求(cors)与它进行通信。我的问题是,我该如何解决这个问题?

来自此 SO 问题的建议说,我必须导航到我需要导航到我发出请求的页面的建议。我尝试将按钮设置为带有锚元素和 href 的链接,但这不起作用。这个问题也使用角度.js我不认为为我的路由器提供新路由并创建一个全新的视图似乎非常谨慎。除此之外,我仍然觉得Facebook会将用户返回到角度应用程序,而不是我想要的快速应用程序。安迪博德知道我应该做什么吗?

更新错误代码

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.

正如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>

现在一切正常

最新更新