Бэкэнд работает на локальном хосте: 8088. Интерфейс работает на локальном хосте: 8000.
При запросе на вход внешний интерфейс отправляет POST определенному внутреннему API.
return axios.post('/oauth2/authorization/github');
Это вернет URL-адрес перенаправления на github.com/login/oauth/authorize/
, и это правильно. Мне удалось подтвердить это, используя предоставленный URL вручную.
Браузер теперь отправляет запрос OPTIONS на /authorize
, но затем возвращает «CORS Missing Allow Origin» как «Перенесено» и тем самым блокирует запрос.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://github.com/login/oauth/authorize?response_type=code&client_id=XXX&scope=read:user&state=XXX%3D&redirect_uri=http://localhost:8088/login/oauth2/code/github. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Действительно, параметр «Разрешить происхождение» отсутствует в блокируемых запросах. Есть ли что-то, что мне не хватает?
Первый POST-запрос (проходит)CORS отсутствует Разрешить Origin
Что я уже пробовал:
Я уже определил конфигурацию CORS в серверной части, а также заголовки Access-Control-Allow-Origin по умолчанию для внешнего интерфейса, отправляющего первый запрос.
@Bean
public CorsConfigurationSource corsConfigurationSource() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration().applyPermitDefaultValues();
corsConfiguration.addAllowedOrigin("http://localhost:8000");
corsConfiguration.addAllowedOrigin("GitHub.com");
corsConfiguration.setAllowedMethods(Arrays.asList("POST", "GET", "PUT", "PATCH", "DELETE", "OPTIONS"));
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**", corsConfiguration);
return source;
}
Я также обнаружил, что повторная отправка первого POST-запроса вручную также работает, что странно, учитывая, что я никак его не редактирую. Возможно, из-за отсутствия «строгого происхождения при перекрестном происхождении» в политике рефереров?
Это конечная точка авторизации OAuth2, и вы не должны отправлять к ней запросы fetch(). Вам необходимо перенаправить пользователя на этот URL-адрес, после чего он будет перенаправлен обратно в ваше приложение.
В URL-адресе, которым вы поделились, есть часть «redirect_url». вы указали этот URL.
Что не удается, так это предполетный запрос на Github. Настройка конфигурации CORS в вашем приложении Spring не может оказать никакого влияния.
Вы хотите перенаправить пользователя на сервер авторизации, а не отправлять запрос между источниками из вашего интерфейса Vue. Что я делаю в этой ситуации, так это меняю начало координат, устанавливая windows.location.href
. Но поскольку это делается в одностраничном коде, мне нужно изменить статус перенаправления с 302
на что-то в диапазоне 2xx
, чтобы код Typescript мог его перехватить. Я написал стартер Spring Boot, чтобы настроить этот статус ответа, используя только свойства приложения (среди многих других вещей).
Также обратите внимание, что при использовании oauth2Login
запросы из вашего приложения Vue авторизуются с помощью файлов cookie сеанса (а не токенов на предъявителя). Это соответствует текущим рекомендациям, но подразумевает две вещи:
Я также написал статью Baeldung с полным решением: интерфейсы Vue, React и Angular, Spring Cloud Gateway, настроенный с фильтром TokenRelay
(мост между авторизацией на основе сеанса и носителя). и Spring REST API, настроенные как сервер ресурсов.
Блин, спасибо большое! Как мне тогда получить ответ от GitHub? localhost:8088/login/oauth2/code/github ведет к 404, хотя его следует настроить