Axios 支持 Set-Cookie 吗？是否可以通过 Axios HTTP 请求进行身份验证？

Question

我正在尝试使用 Axios HTTP 请求调用对 Express API 后端进行身份验证。 我能够在响应标头中看到“Set-Cookie”，但未设置 cookie。是否可以通过 Axios HTTP 调用设置 cookie？

访问控制允许来源：*
连接：保持活动
内容长度：355
内容类型：应用程序/json；字符集=utf-8
日期：格林威治标准时间 2018 年 9 月 28 日星期五 05:59:01
ETag：W/“163-PAMc87SVHWkdimTJca7oRw”
设置 Cookie：令牌=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...；最大年龄=3.6；路径=/;过期=格林威治标准时间 2018 年 9 月 28 日星期五 05:59:04； HttpOnly
X-Powered-By: Express

Answer 1

试试这个！

axios.get('your_url', {withCredentials: true}); //for GET
axios.post('your_url', data, {withCredentials: true}); //for POST
axios.put('your_url', data, {withCredentials: true}); //for PUT
axios.delete('your_url', data, {withCredentials: true}); //for DELETE

有关这方面的更多信息，请参阅 axios 文档：

“withCredentials 指示是否应使用凭据进行跨站点访问控制请求”-https://github.com/axios/axios

有关 withCredentials 的更多详细信息：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

Answer 2

我尝试设置withCredentials: true，但仍然收到此错误：

跨域请求被阻止：同源策略不允许读取位于 http://localhost:4000/users/register 的远程资源。 （原因：CORS 请求未成功）。

CORS 已配置为允许来自前端端口的请求。

我不得不像这样更改 axios 的默认选项：

axios.defaults.withCredentials = true

问题就解决了。没有错误，Set-Cookie 正常工作。

Answer 3

如果其他人遇到我遇到的问题，

这是我对类似问题https://stackoverflow.com/a/62821342/8479303的回答的转贴

---

在我的情况下，网络面板显示响应具有“Set-Cookie”标头，但在 axios 中标头不会显示，并且正在设置 cookie。

对我来说，分辨率是设置Access-Control-Expose-Headers 标头。

为了解释，this comment 在 axios 存储库中的一个问题上，我被定向到了这个 person's notes，这导致我设置了 Access-Control-Expose-Headers header——现在 cookie 已在客户端中正确设置。

因此，在 Express.js 中，我必须将 exposedHeaders 选项添加到我的 cors 中间件：

const corsOptions = {
  //To allow requests from client
  origin: [
    "http://localhost:3001",
    "http://127.0.0.1",
    "http://104.142.122.231",
  ],
  credentials: true,
  exposedHeaders: ["set-cookie"],
};

...

app.use("/", cors(corsOptions), router);

---

同样重要的是，在 axios 方面，我使用 withCredentials 配置来跟踪我想要包含 cookie 的 axios 请求。

前/

const { data } = await api.get("/workouts", { withCredentials: true });

Answer 4

是的，您可以通过 Axios 设置 cookie。 cookie 需要传递到 headers 对象中。您可以在 get/post/put/delete/etc 中发送 cookie。要求： 正如 Aaron 所建议的：

axios.get('URL', {
  withCredentials: true
}); 
axios.post('URL', data, {
withCredentials: true
}); 
axios.put('URL', data, {
withCredentials: true
});
axios.delete('URL', data, {
withCredentials: true
});

或者你也可以试试这个：

axios.get(url, {
            headers: {
                Cookie: "cookie1=value; cookie2=value; cookie3=value;"
            }
        }).then(response => {
              console.log(response);
});