客户端发起ajax跨域请求时, 为什么服务器不能向客户端设置cookie?

Question

我在 http://localhost:63343/ 的客户端向服务器 http://localhost:4001/test 发起跨域请求.

• 客户端部分代码

  const result = await axios.get('http://127.0.0.1:4001/test',{withcredentials:true})

• 服务器部分代码

  app.get('/test', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63343')
    res.setHeader('Access-Control-Allow-Credentials', 'true')
    let theme = {theme: 'silence'}
    res.cookie('person', JSON.stringify(theme), {maxAge: 1000 * 60, httpOnly: false})
    // ...
  })

成功实现跨域请求后, 却无法获得服务器的cookie, 检查响应头发现响应头里携带有set-cookie, 但是浏览器application中没有对应的cookie

Set-Cookie: person=%7B%22theme%22%3A%22silence%22%7D; Max-Age=60; Path=/; Expires=Tue, 19 Apr 2022 02:45:21 GMT

请问在ajax跨域请求中如何使客户端能够存储服务器发送的cookie?

Answer 1

Chrome？

SameSite=None; Secure; 二者缺一不可。

Answer 2

截图看看请求的请求头和响应头？

不然，直接试试把请求代码的ip改为localhost？
const result = await axios.get('http://localhost:4001/test',{withcredentials:true})

或者试试在全局设置axios.defaults.withcredentials=true