让Axios在其请求中自动发送cookie

2022-08-30 00:40:11

我正在使用Axios将客户端的请求发送到我的Express.js服务器。

我在客户端上设置了一个cookie,我想从所有Axios请求中读取该cookie,而无需手动将它们手动添加到请求中。

这是我的客户端请求示例:

axios.get(`some api url`).then(response => ...

我尝试在我的 Express.js 服务器中使用以下属性来访问标头或 Cookie:

req.headers
req.cookies

它们都不包含任何饼干。我正在使用cookie解析器中间件:

app.use(cookieParser())

如何让Axios在请求中自动发送cookie?

编辑:

我在客户端上设置了cookie,如下所示:

import cookieClient from 'react-cookie'

...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
      axios.get('path/to/my/cookie/api').then(response => {
        if(response.status == 200){
          cookieClient.save('cookie-name', response.data, {path:'/'})
        }
      })
    }
...

虽然它也使用Axios,但它与问题无关。我只是想在设置 Cookie 后将 Cookie 嵌入到我的所有请求中。


答案 1

您可以使用 withCredentials 属性。

来自不同域的 XMLHttpRequest 无法为其自己的域设置 Cookie 值,除非在发出请求之前将 withCredentials 设置为 true。

axios.get(BASE_URL + '/todos', { withCredentials: true });

此外,还可以将凭据强制用于每个Axios请求

axios.defaults.withCredentials = true

或者将某些 Axios 请求的凭据用作以下代码

const instance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL
})
instance.get('/todos')

答案 2

TL;DR:

{ withCredentials: true }axios.defaults.withCredentials = true


来自 axios 文档

withCredentials: false, // default

withCredentials指示是否应使用凭据发出跨站点访问控制请求

如果您通过请求,它应该可以正常工作。{ withCredentials: true }

更好的方法是设置如withCredentialstrueaxios.defaults

axios.defaults.withCredentials = true