Я столкнулся с проблемой во время работы над моим проектом в MERN Stack

Question

Я столкнулся с проблемой при работе над моим проектом в MERN Stack.

Мое приложение React работает на порте 3000 и Express API на 5000. Я столкнулся с тем, что при добавлении функции 0auth с использованием избыточности, япоявляется сообщение об ошибке типа «Запрос на перекрестное происхождение заблокирован: та же политика происхождения запрещает чтение удаленного ресурса здесь . (Причина: отсутствует заголовок CORS« Access-Control-Allow-Origin »)».

Теперь структура моей логики выглядит следующим образом:

Я определил стратегию Google для паспорта.Определенные маршруты в экспресс-маршруте (http://localhost:5000/api/user/auth/google) и URL-адрес обратного вызова (http://localhost:5000/api/user/auth/google/callback).) Теперь, когда я непосредственно получаю доступ "http://localhost:5000/api/user/auth/google",, я могу завершить процесс, но когда я вызываю его через редукторыИз приложения «Реакция» я получаю указанную выше ошибку.

Мой код следующий:

// Routes
router.get(
  "/auth/google",
  passport.authenticate("google", {
    scope: ["profile", "email"]
  })

);
router.get(
  "/auth/google/callback",
  passport.authenticate("google", {
    failureRedirect: "/",
    session: false
  }),
  function(req, res) {
    var token = req.user.token;
    console.log(res);
    res.json({
      success: true,
      token: 'Bearer ' + token,
    });
  }
);


//Reducers Action

export const googleLoginUser = () => dispatch => {
  axios
    .get('api/users/auth/google')
    .then((res) => {
      //save to local Storage
      const {
        token
      } = res.data;
      // Set token to local storage
      localStorage.setItem('jwtToken', token);
      //set token to auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      console.log(decoded);
      // set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err => {
        console.log(err);
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      }
    )
}       

Answer 1

Разрешить CORS с помощью промежуточного программного обеспечения для Express.Установите CORS с npm install cors.Импорт CORS import cors from 'cors'.Используйте промежуточное ПО с app.use(cors()), если ваш экземпляр Express называется app .

Пример:

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());

Дайте мне знать, если это решит проблему