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

IT技术 javascript node.js express cookies axios
2021-01-20 23:55:41

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

6个回答

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

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

axios.get('some api url', {withCredentials: true});
@JerryZhang 你是什么意思?我面临同样的问题,如果Access-Control-Allow-Origin没有设置*它意味着,由于 CORS 正确,我不会向该服务器发出请求
2021-03-15 23:55:41
请注意,这仅Access-Control-Allow-Origin在响应标头未设置为通配符 (*)时才有效
2021-03-16 23:55:41
响应需要将Access-Control-Allow-Origin的值设置为要从中发出 XHR 请求的域。例如https://a.com是服务器,https://b.com是客户端,并https://b.com加载到某人的浏览器中并用于XMLHTTPRequest向 发出请求https://a.com除了要设置XMLHTTPRequest(initiated in https://a.com)之外,还需要配置withCredential: true服务器 -https://b.com以便响应头包含Access-Control-Allow-Origin: https://a.com
2021-03-29 23:55:41
如果您尝试连接到 Express 应用程序 - 您将需要使用 cors,并使用这些设置。请求的来源是必需的。app.use(cors({credentials: true, origin: ' localhost:8080 '}));
2021-03-31 23:55:41
@JerryZhang 你是不是点错了?https://b.com在您的示例中代表客户端,因此XMLHTTPRequest应该在b而不是a?
2021-04-10 23:55:41

特尔;博士:

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


来自 axios 文档

withCredentials: false, // default

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

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

一个更好的方法将被设置withCredentialstrueaxios.defaults

axios.defaults.withCredentials = true

@colm.anseo 我相信这个设置在默认情况下是关闭的,因为浏览器在默认情况下通常会阻止所有 CORS。大多数人不需要它,因此默认设置就是这样 - 为大多数人服务。那些需要不同行为的人必须通过设置设置来明确要求它。默认情况下严格,如果您知道自己在做什么,则可以放宽它。
2021-03-18 23:55:41
每个请求发送凭据是一种不好的做法。这些控制措施到位是有原因的。与另一项服务交谈,发送您所有的 cookie - 无论它们是否被使用,都已经成熟。
2021-03-20 23:55:41
您知道在客户端,我是否可以更改(例如删除)服务器设置的 cookie?
2021-03-20 23:55:41
@colminator 只有将服务器域作为其域的 cookie 才会被发送。(默认情况下,它们也不会发送到任何子域,并且可以根据路径进行进一步过滤。)实际上,我们只发送服务器设置的服务器 cookie。
2021-03-23 23:55:41

在快速响应中设置必要的标头也很重要。这些是对我有用的那些:

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();
});
这与axios.defaults.withCredentials = true;我的前端 axios 配置一起是必要的删除 package.json 中的 create-react-app 代理后,我们需要启用 withCredentials,并在我们的 express 应用程序中包含上述中间件。谢谢
2021-03-19 23:55:41
添加X-PINGOTHERAccess-Control-Allow-Headers对我来说是强制性的(Node.js 6.9 和 Express 4.16,Chrome 63)。查看JakeElder在此 GitHub 问题上的帖子:github.com/axios/axios/issues/191#issuecomment-311069164
2021-03-26 23:55:41

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

withCredentials: true

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

所以我遇到了完全相同的问题并且失去了大约 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”密钥。

@MatthewFrancis 我也不认为它会起作用,但它确实起作用了!很高兴我能帮助你
2021-03-31 23:55:41
没想到它会起作用,但你为我节省了一整天!
2021-04-01 23:55:41
呜呜呜呜呜呜呜呜!我一直被这个困扰,这是我在互联网上最喜欢的新答案。非常感谢你!对于那些可能想知道为什么他们的 GET 请求对 isAuthenticated 说是真的,但他们的 POST 请求不是这样的人,你的 POST 必须是这样的格式:axios.post( URL, {data}, {withCredentials: true})。而您的 GET 允许将 withCredentials 与数据一起发送:axios.get( URL, {data, withCredentials: true})。至少在我的反应-> 快速操作中对我来说是这样。
2021-04-04 23:55:41