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


当前回答

所以我也有同样的问题,我花了大约6个小时去寻找,我有

withCredentials:真

但是浏览器仍然没有保存cookie,直到出于某种奇怪的原因,我才想到重新调整配置设置:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

似乎你应该总是先发送“withCredentials”密钥。

其他回答

这并不适用于每个人,但我使用了一个React前端与Vite,它正在为localhost 127.0.0.1:5173服务,这是我作为CORS允许域。只要我都到本地主机一切正常工作!

另一个解决方案是使用这个库:

https://github.com/3846masa/axios-cookiejar-support

它将“Tough Cookie”支持集成到Axios中。注意,这种方法仍然需要withCredentials标志。

我不熟悉Axios,但据我所知,在javascript和ajax中有一个选项

withCredentials: true

这将自动将cookie发送到客户端。例如,这个场景也是用passportjs生成的,它在服务器上设置了一个cookie

这招对我很管用:

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

对我有用的是:

客户端:

import axios from 'axios';

const url = 'http://127.0.0.1:5000/api/v1';

export default {
  login(credentials) {
    return axios
      .post(`${url}/users/login/`, credentials, {
        withCredentials: true,
        credentials: 'include',
      })
      .then((response) => response.data);
  },
};

注意:凭证将是post请求的主体,在这种情况下,用户登录信息(通常从登录表单获得):

{
    "email": "user@email.com",
    "password": "userpassword"
}

服务器端:

const express = require('express');
const cors = require('cors');

const app = express();
const port = process.env.PORT || 5000;

app.use(
  cors({
    origin: [`http://localhost:${port}`, `https://localhost:${port}`],
    credentials: 'true',
  })
);