将 fetch 与 Express、React、cors、cookies 结合使用 - 'Access-Control-Allow-Origin' header
Using fetch with Express, React, cors, cookies - 'Access-Control-Allow-Origin' header
花了很多时间试图解决这个问题,但没有成功。我正在尝试获取 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);
})
}
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" }));
});
花了很多时间试图解决这个问题,但没有成功。我正在尝试获取 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);
})
}
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" }));
});