我正在使用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嵌入到所有请求中。


当前回答

TL; diana:

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


来自axios文档

withCredentials: false, //默认

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

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

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

axios.defaults.withCredentials = true

其他回答

法提赫的答案在2022年仍然有效。

axios.defaults.withCredentials = true也可以做到这一点。

将{withCredentials: true}传递给单独的axios调用似乎不建议使用。

你可以使用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')

你把两种想法混在一起了。

有react-cookie和axios

React-cookie =>用于在客户端处理cookie

Axios =>用于向服务器发送ajax请求

有了这些信息,如果您希望来自客户端的cookie也能在后端进行通信,则需要将它们连接在一起。

来自"react-cookie" Readme的注释:

同构饼干! 为了能够在执行服务器呈现时访问用户cookie,您可以 可以使用plugToRequest或setRawCookie。

链接到readme

如果这是你需要的,很好。

如果没有,请评论,以便我可以详细说明。

就我而言,问题出在cookie上,而不是Axios;虽然我接收和发送cookie从/到相同的域/子域/主机,我期望它在不同的路径上使用不同的资源-但我的cookie就像我已经设置了一个单一的路径,即使我省略了这个属性。显式地设置Path=/;在饼干里解决了这个问题。

这招对我很管用:

首先,我必须使用自定义配置创建一个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