让Axios在请求中自动发送cookie

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

我在客户机上设置了一个cookie，我希望从所有Axios请求中读取该cookie，而不需要手动将它们添加到请求中。

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

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

我试图通过在Express.js服务器中使用这些属性来访问头文件或cookie:

req.headers
req.cookies

它们都没有包含任何cookie。我使用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嵌入到所有请求中。

当前回答

对于那些仍然无法解决这个问题的人，这个答案帮助了我。 Stackoverflow回答:34558264

TLDR; 我们需要在两个axios的GET请求和POST请求(获取cookie)以及fetch中设置{withCredentials: true}。

2019-05-24 08:47:42

其他回答

您可以使用withCredentials属性在请求中传递cookie。

axios.get(`api_url`, { withCredentials: true })

通过设置{withCredentials: true}，您可能会遇到跨起源问题。为了解决这个问题你需要使用

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

在这里你可以读到withCredentials

2020-04-09 07:03:04

对于那些仍然无法解决这个问题的人，这个答案帮助了我。 Stackoverflow回答:34558264

TLDR; 我们需要在两个axios的GET请求和POST请求(获取cookie)以及fetch中设置{withCredentials: true}。

2019-05-24 08:47:42

这招对我很管用:

首先，我必须使用自定义配置创建一个axios的新实例然后，我使用该axios实例发出post请求

参见下面的代码:

 const ax = axios.create({
  baseURL: 'yourbaseUrl',
  withCredentials: true,
});

const loginUser = () => { const body ={username:state.values.email, password:state.values.password};
ax.post('/login',body).then(function(response){
return response}).then().catch(error => console.log(error));}

来源: https://www.npmjs.com/package/axios#creating-an-instance

2021-07-28 15:10:01

对于任何这些解决方案都不起作用的人，请确保您的请求源等于您的请求目标，请参阅github问题。

简而言之，如果您在127.0.0.1:8000访问您的网站，那么请确保您发送的请求是针对127.0.0.1:8001的服务器，而不是localhost:8001，尽管理论上可能是相同的目标。

2020-11-01 07:47:00

TL; diana:

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

来自axios文档

withCredentials: false， //默认

withCredentials指示是否应该使用凭据进行跨站点访问控制请求

如果你传递{withCredentials: true}与你的请求，它应该工作。

更好的方法是在axios.defaults中将withCredentials设置为true