axios 为什么Chrome不能设置cookie

fcg9iug3  于 2022-11-05  发布在  iOS
关注(0)|答案(4)|浏览(225)

我有一个来自服务器的响应。响应头包含一个有效的设置Cookie。Chrome响应/Cookie说我有1个Cookie,可以。但是... Cookie没有设置到DevTools/Application/Cookie中
第一个
此外,我尝试使用Microsoft Edge,但问题并没有解决。为什么浏览器不能设置cookie,考虑到他们知道接收Cookie?

3htmauhk

3htmauhk1#

如果你想做一些背景阅读,那么我建议你寻找CORS(跨源资源共享)的指南,特别是如何在使用CORS时设置cookie。
使用原始代码,您需要将其更改为withCredentials

let response = await axios({
    method: 'post',
    url: 'http://127.0.0.1:3000/api/login', // my Node server on 3000 port   
    data: {
        email : login,
        password: password,
    },
    withCredentials: true
})

在后台,这将在XMLHttpRequest上设置withCredentials标志:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
然后你会在你的控制台上得到CORS错误。如果你通过这些错误你应该能够让它工作。这些错误将包括...
首先,服务器需要返回标头Access-Control-Allow-Credentials: true。这也适用于印前检查OPTIONS请求。
第二,你目前使用的是Access-Control-Allow-Origin: *,但这是不允许使用凭据的请求的。这需要是Access-Control-Allow-Origin: http://www.example.com。同样的,对于预检。
此时,大多数浏览器都应该设置cookie(稍后将详细介绍浏览器的特性)。
若要将Cookie添加到后续请求中,您还需要在这些请求中设置withCredentials: true。还需要应用上面概述的其他标题更改。这些Cookie将不会包含在预检请求中,而只包含在主请求中。
在浏览器的开发者工具中查看cookie并不完全简单。通常这些工具只显示与当前页面相同来源的cookie,不包括通过CORS请求设置的cookie。要查看这些cookie,您需要打开另一个浏览器选项卡,并将URL设置为与CORS请求相同来源的内容。但要小心,您需要选择一个不会设置cookie本身的URL,否则这并不能真正证明什么。
另一种检查设置了哪些Cookie的方法是发送另一个请求(使用withCredentials),然后查看发送了哪些Cookie。
然后是特定于浏览器的问题...
在Safari中,通过CORS设置cookie真的很难。如果Safari是你的目标浏览器,那么我建议对此做一些进一步的研究。
其次,Chrome 80将对CORS Cookie的规则进行重大修改。
https://www.chromium.org/updates/same-site
在Chrome旧版本的控制台上,你已经看到了这方面的警告。简而言之,CORS cookie需要通过https提供,并设置SecureSameSite=None指令。

更新日期:

自从写了这个答案后,我已经为常见的CORS问题创建了一个FAQ。解释cookie使用的部分可以在www.example.com上找到https://cors-errors.info/faq#cdc8。

ifmq2ha2

ifmq2ha22#

如果你使用Axios或Fetch -默认情况下它们不发送cookie。如果你去dav工具-(应用程序选项卡-〉cookie)中检查,你应该看到它们。这不是chrome问题,而是你试图将它们发送回来的方式,在fetch中你需要将credentials: 'include',添加到选项对象中,在axios中它是{withCredentials: true}

brccelvz

brccelvz3#

如果您正在使用express,则可能会将express-session用于您的会话cookie。
来自正式文件:https://www.npmjs.com/package/express-session
如果您使用的是cross-site origin and https安全连接:

session: {
   cookie: {
      maxAge: 1000*60*60*1,
      httpOnly: true, //set false if you want to change the cookie using JavaScipt
      secure: true,
      sameSite: 'none'
  }
}

别忘了设置:app.set('trust proxy', 1)使用快速js
否则在localhost中可以使用

session: {
   cookie: {
      maxAge: 1000*60*60*1,
      httpOnly: true, //set false if you want to change the cookie using JavaScipt
      secure: false,
      sameSite: 'lax'
  }
}
ffvjumwh

ffvjumwh4#

遇到了和OP一样的问题,结果我的问题很简单:
在使用axios时需要注意,如果使用下面的语法:axios.post()

我做错了什么:
axios.post(
    "url",
    { withCredentials: true } // <- this is request body
);
修复:
axios.post(
    "url",
    null,
    { withCredentials: true } // <- this is config
);

相关问题