Не могу получить ответ от сервера из-за CORS

Question

На стороне клиента есть приложение 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

Answer 1

В общем, я решил поменять логику и вместо редиректа на сервере(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));
  };

БЛОГ НА HUSL

Не могу получить ответ от сервера из-за CORS

Ответы (1 шт):