Итак, у меня проблема с тем, чтобы мое приложение стека MEAN предоставляло oauth для Facebook с помощью PassportJS. А именно, я не могу понять, как заставить CORS работать на стороне Angular приложения.
В моем приложении приложение 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:
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, в которой говорится, что «фотографии» - неправильная область видимости (к этому я обращусь позже). Моя проблема в том, что запрос не отправляет ошибку на мой сервер, а вместо этого доставляет ошибку (и я предполагаю конечный объект) в приложение angular (я вижу ошибку в консоли браузера). Браузер, естественно, жалуется на это, поскольку facebook пытается связаться с ним по запросу, который он не инициировал (cors). У меня вопрос, как мне это исправить?
Рекомендации из вопроса это 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.
извините, если я не совсем понял, и я обновил вопрос с ошибкой, предоставленной браузером.
Я думаю, что это вопрос cors из-за предоставленной мне ошибки и того факта, что другие вопросы, которые я искал, наводят на мысль, что это как-то связано с cors. Другой вопрос, который я искал, говорит, что мой сервер отвечает на мое приложение angular перенаправлением 302 на facebook. Я подтвердил это на вкладке сети devtools. Я считаю, что facebook реагирует на это перенаправление (на мое приложение angular), а не нацеливается на мое экспресс-приложение. Мне интересно, что с этим делать
Что ж, если вы считаете, что это связано с CORS, вам необходимо предоставить все связи между браузером и сервером, связанные с этим вызовом. 302 может быть фактически запрещенным кодом на некоторых этапах согласования CORS.
похоже, что он нацелен на ваш сервер (если у вас нет приложения Angular в порту 3000). Попробуйте ngrok и настройте URI обратного вызова Facebook на свой URL-адрес Ngrok. Найдите ngrok
Ну это у меня плохо. В разделе разработчиков Facebook я ввел то, что я считал http uri. Между тем я не знал, что Facebook автоматически преобразует это в протокол https (что бы я ни делал! Даже если у меня не установлен принудительный https !!). Поскольку я не настроил соединение ssl / tsl, я не могу получить обратный вызов. Я не уверен, что это конец, все проблемы, но я знаю, что это проблема, с которой я столкнулся сейчас. Извините, друзья.
На самом деле это не проблема CORS, а проблема в том, что этот запрос изначально был сделан неправильно. Пользователь должен взаимодействовать с диалоговым окном входа в систему - и этого, конечно, не произойдет, если вы попытаетесь запросить его в фоновом режиме. Вам нужно перенаправить пользователя к URL-адресу диалога входа в систему в его браузере - все, что пытается сделать что-либо AJAX-y в этом отношении, в корне неправильно с самого начала.
Хорошо, я понял. Но как правильно сделать это перенаправление?
наконец понял это





Как прокомментировал CBroe, метод, который я использовал для вызова, был неправильным, так как его нельзя было выполнить ахаксиальным способом. В итоге я использовал тег привязки с атрибутом 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>
Все работает сейчас
Очень громоздкое описание. Какую ошибку вы видите в консоли браузера? Как вы думаете, почему вам нужно настроить что-то, связанное с CORS, в приложении angular? CORS - это на самом деле переговоры между сервером и браузером, он не требует от вас какой-либо настройки клиентского приложения.