关于javascript：使Axios自动在其请求中发送cookie


Make Axios send cookies in its requests automatically

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

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

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

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

我试图通过在Express.js服务器中使用以下属性来访问标头或cookie：

1
2
req.headers
req.cookies

他们两个都不包含任何cookie。 我正在使用cookie解析器中间件：

1
app.use(cookieParser())

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

编辑：

我像这样在客户端上设置cookie：

1
2
3
4
5
6
7
8
9
10
11
12
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嵌入到我的所有请求中。

相关讨论

我遇到了同样的问题，并通过withCredential属性对其进行了修复。

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

1
axios.get('some api url', {withCredentials: true});
相关讨论

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

1
withCredentials: true

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

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

1
2
3
4
5
6
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; DR：

{ withCredentials: true }或axios.defaults.withCredentials = true

从axios文档

withCredentials: false, // default

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

如果您将{ withCredentials: true }与您的请求一起传递，则它应该有效。

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

axios.defaults.withCredentials = true

相关讨论

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

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

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

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

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

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

也设置

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

您将两种想法混为一谈。

您有" 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.

链接到自述文件

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

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

相关讨论

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

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