Spring + Vue + OAuth2 — отсутствует CORS, разрешающий происхождение

Бэкэнд работает на локальном хосте: 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-запроса вручную также работает, что странно, учитывая, что я никак его не редактирую. Возможно, из-за отсутствия «строгого происхождения при перекрестном происхождении» в политике рефереров?

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...
Версия Java на основе версии загрузки
Версия Java на основе версии загрузки
Если вы зайдете на официальный сайт Spring Boot , там представлен start.spring.io , который упрощает создание проектов Spring Boot, как показано ниже.
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
0
0
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это конечная точка авторизации OAuth2, и вы не должны отправлять к ней запросы fetch(). Вам необходимо перенаправить пользователя на этот URL-адрес, после чего он будет перенаправлен обратно в ваше приложение.

Блин, спасибо большое! Как мне тогда получить ответ от GitHub? localhost:8088/login/oauth2/code/github ведет к 404, хотя его следует настроить

Quadrum 15.07.2024 01:33

В URL-адресе, которым вы поделились, есть часть «redirect_url». вы указали этот URL.

Evert 15.07.2024 03:17
stackoverflow.com/a/48868485/619830
ch4mp 15.07.2024 09:25

Что не удается, так это предполетный запрос на Github. Настройка конфигурации CORS в вашем приложении Spring не может оказать никакого влияния.

Вы хотите перенаправить пользователя на сервер авторизации, а не отправлять запрос между источниками из вашего интерфейса Vue. Что я делаю в этой ситуации, так это меняю начало координат, устанавливая windows.location.href. Но поскольку это делается в одностраничном коде, мне нужно изменить статус перенаправления с 302 на что-то в диапазоне 2xx, чтобы код Typescript мог его перехватить. Я написал стартер Spring Boot, чтобы настроить этот статус ответа, используя только свойства приложения (среди многих других вещей).

Также обратите внимание, что при использовании oauth2Login запросы из вашего приложения Vue авторизуются с помощью файлов cookie сеанса (а не токенов на предъявителя). Это соответствует текущим рекомендациям, но подразумевает две вещи:

  • защита от CSRF (на основе файлов cookie в случае одной страницы или мобильного приложения)
  • одностраничный и Spring-бэкэнд должны обслуживаться с одним и тем же источником (файл cookie сеанса помечен как тот же сайт) => для запросов REST от вашего приложения Vue к Spring-бэкэнду вам нужен обратный прокси-сервер, а не конфигурация Spring CORS.

Я также написал статью Baeldung с полным решением: интерфейсы Vue, React и Angular, Spring Cloud Gateway, настроенный с фильтром TokenRelay (мост между авторизацией на основе сеанса и носителя). и Spring REST API, настроенные как сервер ресурсов.

Другие вопросы по теме