让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嵌入到所有请求中。

当前回答

在尝试了2天之后，在尝试了这里的建议之后，这对我来说是有效的。

表达: Cors: Cors ({origin: "http:127.0.0.1:3000"， credentials: true，}) Cookie:确保您的Cookie具有secure: true, sameSite: "None" 前端(反应)

axios.defaults.withCredentials = true; (withCredentials: true不适合我)到您请求cookie的地方以及您发送cookie的地方(GET/POST)

希望这也能帮助到其他人。

2022-08-22 05:59:28

其他回答

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

withCredentials: true

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

2017-04-08 10:03:01

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

有react-cookie和axios

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

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

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

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

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

链接到readme

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

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

2017-04-05 10:18:40

对我有用的是:

客户端:

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',
  })
);

2020-09-30 19:01:31

TL; diana:

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

来自axios文档

withCredentials: false， //默认

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

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

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

axios.defaults.withCredentials = true

2019-01-31 23:25:09

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

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