0

На стороне клиента есть приложение React, сервер написан на Node (ExpressJS). При нажатии кнопки срабатывает функция, которая отправляет GET-запрос на локальный сервер, который, в свою очередь, обращается к авторизации Google API:

axios
  .get('http://localhost:5000/youtube-auth', playlist, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true,
      "Access-Control-Allow-Headers": "Content-Type",
    },
    withCredential: true
  })
  .then((response) => {
    console.log('Code successful');
  })
  .catch(e => console.error(e));

При обращении к серверу напрямую (localhost:5000/youtube-auth) или через Postman все работает корректно. Однако, если я делаю запрос через localhost:8888 (где у меня стоит React), запрос блокируется из-за CORS. Проблема вроде бы ясна, и решение тоже вроде понятное — вписать в Headers Access-Control-Allow-Origin, но у меня не получается! Если вы посмотрите на ответ, то увидите, что статус ответа — 200, однако из-за CORS браузер блокирует выполнение. Можно также заметить, что Access-Control-Allow-Origin нет в заголовках Request

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&include_granted_scopes=true... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

Request Headers on browser( не могу добавить прямо скриншот)

Изначально я предполагал, что проблема на бэкенде, но почему тогда все работает, если обращаться прямо? Но я все равно добавил поддержку CORS и немного конфига на сервере:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); 
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Скорее всего проблема в том, что я не до конца понимаю как настроить Headers, но уже зашел в тупик и не понимаю куда копать. Я также пытался сделать запрос через fetch, но даже тогда возникла та же ошибка. Подскажите пожалуйста куда смотреть, чтобы решить проблему и разобраться в этом поглубже. Думаю также попробовать решить через proxy-middleware

4
  • А с чего это вдруг ваше приложение лезет на https://accounts.google.com/....?
    – Alexey Ten
    30 мар 2022 в 15:34
  • на localhost:5000/youtube-auth написана логика авторизации гугл аккаунта, дабы далее можно было выполнять разные действия(создание плейлиста, добавление видео в неё)
    – chinzano
    30 мар 2022 в 15:54
  • Рекомендую ещё раз изучить документацию. Запросы fetch-ом из браузера в account там явно не предусмотрены
    – Alexey Ten
    30 мар 2022 в 16:01
  • Может я не так хорошо описал, поэтому уточню: запрос я посылаю на свой сервер(localhost:5000/youtube-auth), внутри которого происходит генерация auth-url-а, затем редиректиться туда, открывается форма авторизации гугл, после прохождения всего происходит редирект, который я прописывал настройках приложения на cloud.google.com. Но я почитаю еще раз внимательней, но больше вопрос в том, как сделать так, чтобы браузер не блокировал респонсы от гугла
    – chinzano
    30 мар 2022 в 16:09

1 ответ 1

0

В общем, я решил поменять логику и вместо редиректа на сервере(localhost:5000)

const oauth2Client = new google.auth.OAuth2(
    youtube_clientId,
    youtube_clientSecret,
    youtube_redirectUrl
  );

  const scopes = [
    'https://www.googleapis.com/auth/youtube'
  ];

  const authorizationUrl = oauth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: scopes,
    include_granted_scopes: true
  });

  let userCredential = null;

  res.redirect(authorizationUrl);

решил просто возвращать сам auth_url, где далее будет редиректить уже реакт:

res.send({authorizationUrl});

На стороне клиента я просто сделал handler:

  const onYoutubeClick = () => {
    axios
      .post('http://localhost:5000/youtube-auth', playlist)
      .then(response => {
        window.location.assign(response.data.authorizationUrl);
      })
      .catch(e => console.error(e));
  };

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.