ReactJS вызов к внутреннему маршруту для входа пользователя в систему через Google / Facebook

Question

Сервер NodeJS Express работает на localhost: 5000 Также мой сервер ReactJS работает на порту localhost: 3000

Я пытаюсь выполнить вход в систему с помощью oAuth2.0 Google , но у меня возникают проблемы при совершении вызовов на внутренний маршрут из моего приложения React.

У меня на бэк-энде есть стратегия входа в Google проверено , и она работает . Генерирует мне токен и возвращает его.

ОБРАТНЫЕ МАРШРУТЫ (проверено и работает, генерирует и возвращает мне токен после выбора аккаунта Google)

router.get(
  '/api/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

router.get(
  '/api/auth//google/redirect',
  passport.authenticate('google', { session: false }),
  (req, res) => {
    signToken(res, req.user);
  }
);

// Sign JSON Web Token, expires in 60 minutes
const signToken = (res, user) => {
  const payload = {
    id: user.id,
    name: user.name,
    email: user.email,
    role: user.status.role
  };

  jwt.sign(payload, keys.secretOrKey, { expiresIn: 3600 }, (err, token) => {
    res.json({
      success: true,
      token: `Bearer ${token}`
    });
  });
};

Я упоминал ранее, что у меня проблемы с ReactJS. Как правильно позвонить с моего интерфейса на сервер и получить этот токен JWT?

У меня есть прокси в моем package.json

 "proxy": "http://localhost:5000"

Из моего компонента я пытаюсь сделать обычные осевые вызовы моего бэкэнда, чтобы открыть это окно, чтобы выбрать пользователя Google ... Я потерял в этой части, как это должно работать. Мой код:

import React, { Component } from 'react';
import axios from 'axios';

class testLogin extends Component {
  onGoogleClick = () => {
    axios
      .get('/api/auth/google')
      .then(res => console.log(res.data))
      .catch(err => console.log(err));
  };
  render() {
    return (
      <div>
        <button onClick={this.onGoogleClick}>Login With Google Account</button>
      </div>
    );
  }
}

export default testLogin;

Ошибка, которую я получаю:

Доступ к XMLHttpRequest по адресу «https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Fauth%2Fgoogle%2Fredirect&scope=profile%20email&client_id=510739647280-cggqldrpluvg35do2lv83ud3118pgal5.apps.googleusercontent.com' (перенаправлено из 'http://localhost:3000/api/auth/google') из источника 'http://localhost:3000' заблокирован политикой CORS: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс.

Answer 1

Попробуйте добавить это

app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', '*')
      next()
})

Вы должны включить cors в вашем экспресс-приложении: включить cors на nodejs