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

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

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

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

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

我试图在我的Express.js服务器中使用以下属性访问标题或cookie：

req.headers
req.cookies

他们俩都没有饼干。我正在使用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嵌入到我的所有请求中

我遇到了同样的问题，并通过使用属性修复了它

来自不同域的XMLHttpRequest无法为其自己的域设置cookie值，除非在发出请求之前将withCredentials设置为true

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

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

---

你把两者混淆了

你有“反应饼干”和“axios”

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

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

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

“react cookie”自述文件中的注释：

同构饼干

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

如果这是你需要的，太好了

---

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

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

withCredentials: true

---

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

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

---

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

with credentials

标志。

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

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

---

TL；医生：

{withCredentials:true}

或

axios.defaults.withCredentials=true

---

来自axios文档

withCredentials:false，//默认值

withCredentials

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

如果您将

{withCredentials:true}

与您的请求一起传递，它应该可以工作

更好的方法是在

axios.defaults中将
withCredentials
设置为
true

axios.defaults.withCredentials=true

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

设置
axios.defaults.withCredentials=true

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

如果您的“访问控制允许原点”设置为
通配符（*）。
因此，请确保指定请求的源url

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

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

也设置

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

对于仍然无法解决这个问题的人来说，这个答案帮助了我。

TLDR；
我们需要为axios和fetch在GET请求和POST请求（获取cookie）中设置
{withCredentials:true}
。
因此我遇到了完全相同的问题，失去了大约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”键。
您可以使用
withCredentials
属性在请求中传递cookies

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

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

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

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

在这里，你可以阅读到对我有用的东西：

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

客户端：

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请求的主体，在这种情况下，用户登录信息（通常从登录表单获得）：

服务器端：

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

对于这些解决方案都不起作用的任何人，请确保您的请求来源与您的请求目标相同，请参阅

简而言之，如果您访问127.0.0.1:8000上的网站，请确保您发送的请求针对127.0.0.1:8001上的服务器，而不是localhost:8001，尽管理论上可能是相同的目标。
您是如何在客户端设置cookie的？请显示代码示例：）@TzookBarNoy在问题中添加了代码Cookie是由服务器使用set Cookie设置的，而不是由客户端设置的，我猜您的意思是在客户端读取Cookie。根据Cookie协议，客户端应在其对Cookie颁发者服务器的请求中包含Cookie标头。如果您试图连接到Express应用程序，请查看此消息-您将需要使用cors，并使用这些设置。请求的来源是必需的。使用（cors（{凭证：true，来源：'}））；请注意，这仅在响应标题中的
访问控制允许原点
未设置为通配符（*）时起作用@JerryZhang您的意思是什么？我面临着同样的问题，如果
访问控制允许源站
未设置为
*
，这意味着，我不会向该服务器发出请求，因为CORS权限响应需要将
访问控制允许源站
的值设置为要从中发出XHR请求的域。e、 g.
https://a.com
是服务器，
https://b.com
是客户端，
https://b.com
加载到某人的浏览器中，并使用
XMLHTTPRequest
向
https://a.com