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

Question

我正在使用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.

Answer 1

我有同样的问题,并通过withCredential属性修复它.

来自其他域的XMLHttpRequest无法为自己的域设置cookie值,除非在提出请求之前将withCredentials设置为true.

axios.get('some api url', {withCredentials: true});

Answer 2

Fatih 的答案在 2022 年仍然有效且很棒。

也axios.defaults.withCredentials = true将发挥作用。

似乎传递{ withCredentials: true }给单个 axios 调用已被弃用。

Answer 3

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

withCredentials: true

这将自动将cookie发送到客户端.例如,这个场景也是使用passportjs生成的,后者在服务器上设置cookie

Answer 4

对我有用的：

客户端：

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

注意：凭据将是发布请求的正文，在本例中是用户登录信息（通常从登录表单获取）：

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

Answer 5

在快速响应中设置必要的标头也很重要。这些是为我工作的：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', yourExactHostname);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Answer 6

TL; DR：

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

从axios文档

withCredentials: false, // default

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

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

一个更好的方法将被设置withCredentials为true在axios.defaults

axios.defaults.withCredentials = true

Answer 7

对于仍然无法解决它的人，这个答案帮助了我。 stackoverflow 答案：34558264

TLDR；需要{withCredentials: true}在 GET 请求和 POST 请求（获取 cookie）中为 axios 和 fetch 设置。

Answer 8

所以我遇到了完全相同的问题并且失去了大约 6 个小时的生命搜索，我有

withCredentials: true

但是浏览器仍然没有保存 cookie，直到出于某种奇怪的原因，我想到了调整配置设置的想法：

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

似乎您应该始终首先发送“withCredentials”密钥。

Answer 9

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

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

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

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

在这里你可以阅读withCredentials

Answer 10

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

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

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

Answer 11

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

放 axios.defaults.withCredentials = true;

或者对于某些特定的请求，您可以使用 axios.get(url,{withCredentials:true})

如果您的“Access-Control-Allow-Origin”设置为通配符（*），则会出现 CORS 错误。因此，请确保指定请求的来源网址

例如：如果使请求在 localhost:3000 上运行的前端，则将响应标头设置为

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

还设置

res.setHeader('Access-Control-Allow-Credentials',true);