Cookie未在瀏覽器中設置

Question

我正在嘗試設置一個包含我的身份驗證令牌的cookie。 我可以看到它在響應頭set-cookie: xxxxxx被返回，但無論出於何種原因，瀏覽器都沒有存儲cookie。

在我的反應前端http://app1.dev:3001我正在進行POST api調用：

return axios.get(
  `${apiUrl}/info`,
  { withCredentials: true }
)
.then(res => res.data)
.catch(console.error)

我有一個在http://localhost:3000上運行的簡單Koa服務器

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？ 任何幫助將不勝感激。

Answer 1

當您使用http://localhost:3001作為前端時，您的前端服務器和后端服務器共享同一個域（即使在不同的端口上），因此您可以看到通過請求設置到后端服務器的cookie（並鏈接到后端服務器域）。

當您使用不同的域時，您無法看到cookie，因為開發工具附加到屬於另一個域的頁面。 但cookie已保存，並將隨后發送回請求。