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

Question

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

我在客户端设置了一个 cookie，我想从所有 Axios 请求中读取该 cookie，而无需手动将它们添加到手动请求中。

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

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

我试图通过在我的 Express.js 服务器中使用这些属性来访问 headers 或 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

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

Answer 2

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

您有 "react-cookie" 和 "axios"

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

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

根据该信息，如果您希望客户端的 cookie 也能在后端进行通信，则需要将它们连接在一起。

来自 "react-cookie" 自述文件的注释：

Isomorphic cookies!

To be able to access user cookies while doing server-rendering, you can use plugToRequest or setRawCookie.

link to readme

如果这就是您所需要的，那就太好了。

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

Answer 3

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

withCredentials: true

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

Answer 4

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

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

将 "Tough Cookie" 支持集成到 Axios 中。请注意，此方法仍然需要 withCredentials 标志。

Answer 5

在快速回复中设置必要的 headers 也很重要。这些是对我有用的：

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 设置为 axios.defaults

中的 true

axios.defaults.withCredentials = true

Answer 7

How do I make Axios send cookies in requests automatically?

设置axios.defaults.withCredentials = true;

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

this will give CORS error if your 'Access-Control-Allow-Origin' is set to wildcard(*). Therefore make sure to specify the url of origin of your request

例如：如果发出请求的 front-end 在 localhost:3000 上运行，则将响应 header 设置为

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

同时设置

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

Answer 8

对于仍然无法解决的人，这个答案对我有帮助。

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

Answer 9

所以我遇到了完全相同的问题，并且浪费了大约 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 10

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

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

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

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

在这里您可以阅读有关 withCredentials

Answer 11

对我有用的：

客户端：

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

Answer 12

对于 none 这些解决方案有效的任何人，请确保您的请求来源等于您的请求目标，请参阅 this github issue。

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

Answer 13

这对我有用：

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

Answer 14

Fatih 的回答在 2021 年仍然有效且很棒。

axios.defaults.withCredentials = true 也行。

似乎不推荐将 { withCredentials: true } 传递给各个 axios 调用。

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

Make Axios send cookies in its requests automatically

javascript

cookies

node.js

express

axios