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));
  };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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