将 fetch 与 Express、React、cors、cookies 结合使用 - 'Access-Control-Allow-Origin' header

Question

花了很多时间试图解决这个问题，但没有成功。我正在尝试获取 csurf 保护运行 cookie。目前，我已经尽可能地简化了以下代码。我是运行从 React 到 Express 上的另一台服务器的获取请求。它给出了错误：

“从源 'http://localhost:3000' 获取 'http://localhost:3003/testlogin' 的访问已被 CORS 策略阻止：请求中不存在 'Access-Control-Allow-Origin' header资源。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以获取禁用 CORS 的资源。"

据我了解，'Access-Control-Allow-Origin' header 设置在我的 corsOptions 中。所以它不应该抛出这个错误。我显然错过了一些东西。非常感谢收到任何帮助。

快递服务器：

const cookieParser = require("cookie-parser");
const cors = require('cors')
const express = require("express");
const csrf = require("csurf");

const app = express();

const csrfMiddleware = csrf({ cookie: true });

app.use(cookieParser());

const corsOptions = {
  origin: 'http://localhost:3000',   
  methods: "GET,HEAD,POST,PATCH,DELETE,OPTIONS",
  credentials: true,               
  allowedHeaders: "Content-Type, Authorization, X-Requested-With, Accept",
}
app.options('*', cors(corsOptions))

app.use(csrfMiddleware);

app.post("/testlogin", cors(corsOptions), (req, res) => {
  console.log('test login reached', );
  res.end(JSON.stringify({ status: "success" }));
});

const PORT = process.env.PORT || 3003;
app.listen(PORT, () => {
  console.log(`Listening on http://localhost:${PORT}`);
});

Front-end（反应）：

function testClick() {
  console.log("testClick Clicked");

  let urlToGetUserProfile = 'http://localhost:3003/testlogin'

  return fetch(urlToGetUserProfile, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    credentials: "include",
    body: JSON.stringify({ idToken: "idTokengoeshere" }),
  })
    .then((fetchResponse) => {
      console.log(fetchResponse);
    })
}

Answer 1

csrfMiddleware 中间件函数在 cors 中间件之前被调用。

它抛出 ForbiddenError: invalid csrf token 阻止 cors 中间件将 headers 添加到响应中。

您可以通过将 cors 中间件首先 .

来解决这个问题

app.use(cors(corsOptions));
app.use(csrfMiddleware);

app.post("/testlogin",(req, res) => {
  console.log('test login reached', );
  res.end(JSON.stringify({ status: "success" }));
});

将 fetch 与 Express、React、cors、cookies 结合使用 - 'Access-Control-Allow-Origin' header

Using fetch with Express, React, cors, cookies - 'Access-Control-Allow-Origin' header

reactjs

express

cors

fetch

csrf