Angular 5 / Express / CORS與Facebook OAuth

Question

因此，讓我的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的錯誤，稱“照片”的范圍不正確（我稍后會解決）。 我的問題是請求沒有向我的服務器發送錯誤，而是向角度應用程序發送了錯誤（並且我會假定最終對象）（我在瀏覽器控制台中看到了錯誤）。 自然，瀏覽器對此有所抱怨，因為facebook嘗試根據未啟動的請求與其進行通信（正確）。 我的問題是，我該如何解決？

來自這個 SO問題的建議說，我必須導航到需要導航至提出請求的頁面的建議。 我嘗試將按鈕與錨元素和href鏈接，但這是行不通的。 同樣，該問題使用angular.js，我不認為在路由器中提供新路由並創建全新視圖似乎非常謹慎。 除此之外，我仍然覺得Facebook將使用戶返回到有角度的應用程序，而不是我想要的我的快速應用程序。 andybody知道我該怎么做嗎？

更新錯誤代碼

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.

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

現在一切正常