Express cors не разрешает учетные данные

У меня есть внешний интерфейс с react и серверная часть с express and mongodb, у меня есть компонент, который должен сделать запрос на выборку, включая учетные данные, которые уже должны быть установлены. Все маршруты работают на почтальоне, но я не могу воссоздать функциональность с помощью функции выборки. Экспресс-сервер:

...
    server.use(helmet());
    server.use(compression());
    server.use(cors({
      credentials: true,
    }));

    if (process.env.NODE_ENV !== "production") {
      server.use(logger("dev"));
    }
    server.use(express.json());
    server.use(express.urlencoded({ extended: false }));

    server.use(cookieParser());

    server.use(
      session({
        secret: process.env.COOKIE_SECRET,
        resave: true,
        saveUninitialized: false,
        store: new MongoStore({ mongooseConnection: mongoose.connection })
      })
    );

    server.use(auth.initialize);
    server.use(auth.session);
    server.use(auth.setUser);

    //API ROUTES
    server.use("/user", require("./api/routes/user"));
    server.use("/pitch", require("./api/routes/pitch"));
    server.use("/match", require("./api/routes/matchmaking"));
...

Маршруты пользователей:

router.post("/login", passport.authenticate("local"), (req, res, next) => {
  return res.status(200).json({
    message: "User logged in correctly",
    redirect: "/"
  });
});

router.get("/checklogin", (req, res, next) => {
  if (req.user) return next();
  else
    return res.status(401).json({
      error: "User not authenticated"
    });
},
 (req, res, next) => {
  return res.status(200).json({
    message: "User logged in correctly",
    redirect: "/"
  });
});

Внешний интерфейс:

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("http://localhost:8000/user/checklogin", {
        credentials: 'include'
      });
      const data = await response.json();

      console.info(data);

    }

    fetchData();
  }, []);

Используя этот код, я получаю эту ошибку

Access to fetch at 'http://localhost:8000/user/checklogin' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Как я уже сказал, все работает на почтальоне, но не с функцией выборки.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
3 757
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете сделать что-то вроде этого экспресс

app.use(cors({credentials: true, origin: 'http://localhost:3000'}));
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", 'http://localhost:3000');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

в роутере

router.all('*', cors());

при отправке ответа делать

 res.header("Access-Control-Allow-Origin", 'http://localhost:3000');
 res.json(someJson)
Ответ принят как подходящий

Как говорит ошибка:

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Когда вы делаете это server.use(cors()), все запросы разрешены по умолчанию, и из-за этого заголовок 'Access-Control-Allow-Origin' устанавливается на '*'.

Итак, вы можете указать corsOptions, чтобы обойти эту проблему.

var whitelist = ['http://localhost:3000', /** other domains if any */ ]
var corsOptions = {
  credentials: true,
  origin: function(origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

server.use(cors(corsOptions));

Спасибо, я сделал, как вы сказали, но я получаю (Неавторизованный), даже если пользователь вошел в систему...

Leonardo Drici 28.05.2019 11:04

Хм, я полагаю, что LocalStrategy настроена не полностью. Вы правильно смонтировали serializeUser и deserializeUser ?

Anand Undavia 28.05.2019 13:49

Я также не вижу passport.init() и passport.session(). Вы выполнили все шаги из здесь

Anand Undavia 28.05.2019 13:51

Я нашел решение, оно включало функцию выборки, которая не сохраняла файл cookie сеанса, и поэтому она не работала, но ваше решение все же помогло.

Leonardo Drici 28.05.2019 21:59

Я рад, что это помогло!

Anand Undavia 29.05.2019 07:43

Другие вопросы по теме