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

我遇到了同样的问题，并通过使用该withCredentials属性进行了修复。

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

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

TL; DR：

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

从axios文档

withCredentials: false, // default

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

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

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

axios.defaults.withCredentials = true

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

withCredentials: true

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

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

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

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

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

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

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

TLDR；一个人需要{withCredentials: true}在axios和fetch中都同时设置GET请求和POST请求（获取cookie）。

如何使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);

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

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

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

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

在这里您可以了解withCredentials

您将两种想法混为一谈。

您有“ react-cookie”和“ axios”

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

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

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

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

同构饼干！

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

链接到自述文件

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

如果没有，请发表评论，以便我进一步阐述。

因此，我遇到了同样的问题，失去了大约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”密钥。