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值，除非在提出请求之前将ofCredentials设置为true。

<a href="#" class="toggle-nav"><p>toggle</p></a>

Answer 2

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

withCredentials: true

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

Answer 3

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

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 4

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

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

将“Tough Cookie”支持集成到Axios中。请注意，此方法仍需要withCredentials标记。

Answer 5

从axios文档中

withCredentials：假，//默认

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

如果您通过{ withCredentials: true }并通过了请求，那么它应该可以正常工作。

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

axios.defaults.withCredentials = true

Answer 6

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

text-align: center;

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

withCredentials: true

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

Answer 7

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

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

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

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

在这里您可以阅读有关withCredentials

的信息

Answer 8

你让两个想法好坏参与。

你有＆＃34; react-cookie＆＃34;和＆＃34; axios＆＃34;

react-cookie =＆gt;用于处理客户端的cookie

axios =＆gt;用于向服务器发送ajax请求

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

来自＆＃34; react-cookie＆＃34;自述：

同构饼干！

为了能够在进行服务器渲染时访问用户cookie，您   可以使用plugToRequest或setRawCookie。

link to readme

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

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

Answer 9

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

设置axios.defaults.withCredentials = true;

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

如果您的“ Access-Control-Allow-Origin”设置为通配符（*）。因此，请务必指定您请求的来源网址

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

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

也设置

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

Answer 10

对于仍然无法解决问题的人，此答案对我有所帮助。 stackoverflow answer: 34558264

TLDR；一个人需要在axios和fetch的GET请求和POST请求（获取cookie）中都设置typedef struct Node { char* nameOfTheFile; struct Node* firstChild; struct Node* nextSibling; struct Node* parent; int isFile; } NODE; NODE* root; NODE* currentLocation; char* prepend(char* path, const char* toAdd, int lastWordBeforeRoot) { char *newPath = (char*)malloc(strlen(path) + 3 + strlen(toAdd)); strcat(newPath, path); if(!lastWordBeforeRoot && strcmp(toAdd, "/") != 0){ strcat(newPath,"/"); } strcat(newPath,toAdd); free(path); strcat(newPath, "\0"); return newPath; } void pwd() { NODE* currentFolder = currentLocation; char* path = (char*)malloc(sizeof(char)); while (currentFolder != NULL) { if (currentFolder->parent != NULL && strcmp(currentFolder->parent->nameOfTheFile, "/") == 0) { path = prepend(path, currentFolder->nameOfTheFile, 1); } else { path = prepend(path, currentFolder->nameOfTheFile, 0); } currentFolder = currentFolder->parent; } printf("%s \n", path); }。

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

服务器端：

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

对于这些解决方案都不起作用的任何人，请确保您的请求来源等于您的请求目标，请参阅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

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

13 个答案: