我正在尝试设置一个包含我的身份验证令牌的 cookie。我可以看到它在响应标头中返回
set-cookie: xxxxxx
但无论出于何种原因,浏览器都没有存储 cookie。
在我的 React 前端
http://app1.dev:3001
我正在进行 POST api 调用:
return axios.get(
`${apiUrl}/info`,
{ withCredentials: true }
)
.then(res => res.data)
.catch(console.error)
我有一个简单的 Koa 服务器运行在
http://localhost:3000
const Koa = require("koa")
const Router = require("koa-router")
const bodyParser = require("koa-bodyparser")
const cors = require("@koa/cors")
const axios = require("axios")
const env = require("./env")
const KeyGrip = require("keygrip")
const app = new Koa()
const router = new Router()
const port = env("port")
const keyList = ["xxxxxxx",]
app.keys = new KeyGrip(keyList, "sha256")
router.get("/info", ctx => {
console.log('req', ctx.req)
ctx.cookies.set("token", "test_token", { signed: true, httpOnly: true })
ctx.body = { ok: true }
})
const corsOptions = {
origin: ctx => ctx.request.header.origin,
credentials: true
}
app
.use(cors(corsOptions))
.use(bodyParser())
.use(router.routes())
.use(router.allowedMethods())
app.listen(port, () => console.info(`Listening on port ${port}`))
我怀疑它没有被设置,因为它是跨域的。当我在前端使用
http://localhost:3001
时,cookie 会设置得很好。
为什么浏览器中没有设置cookie?任何帮助将不胜感激。
当您使用
http://localhost:3001
作为前端时,您的前端和后端服务器共享相同的域(即使位于不同的端口),因此您可以看到通过对后端服务器的请求设置的 cookie(因此链接到后端服务器域) ).
当您使用不同的域时,您只是看不到 cookie,因为开发工具附加到属于另一个域的页面。但 cookie 会被保存,并将与后续请求一起发回。
我也遇到了同样的问题。 如果响应标头包含此标头“cache-control:”no-cache,no-store” 浏览器不会设置 cookie,因此请从响应中删除此标头。
如果有人遇到同样的问题,这可能会有所帮助。
前端: 如果使用 axios,则添加:
withCredentials: true
。
对于 fetch() 添加: credentials: 'include'.
后端: 如果您使用
http://localhost:....
,那么您可以添加到您的 Cookie sameSite:'lax'
,只需确保您在使用 Secure
时没有将 http://localhost
添加到此 Cookie,因为它仅适用于 https
而不是 http
,否则您的 cookie 将不会添加到浏览器中。
在生产中添加 sameSite: 'none'
和 Secure
就可以了。
我也添加了一些标题:
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept, authorization')
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin','http://localhost:3000');
res.setHeader('Access-Control-Allow-METHODS',"GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
还补充:
app.use(cors({
origin: 'http://localhost:3000',
credentials: true
}))
只需确保您在添加来源时没有使用
'*'
。
以上所有内容都对我的项目有所帮助,我希望对其他人也有帮助。