axios的withCredentials到底是什么意思？

nbstudy 发表于 2024-07-16 09:20:28

通常我们使用以下代码创建一个axios实例。

javascript 复制代码

const axiosInstance = axios.create({
  baseURL:import.meta.env.AXIOS_BASE_URL as string,
  withCredentials: true,
  timeout: 55000,
});

那上述代码中的withCredentials 是什么意思呢？

withCredentials 是 XMLHttpRequest 对象的一个属性。

axios也是XMLHttpRequest的封装，当然最新的axios版本底层也支持fetch了。

withCredentials用于指示是否应该允许跨域请求携带凭据（如Cookies、HTTP认证信息、客户端SSL证明等）。当设置为 true 时，它允许跨域请求发送凭据，但同时也要求服务器端必须正确响应CORS（跨源资源共享）策略。

详解 withCredentials：

1. 默认值：withCredentials 的默认值是 false。

这意味着，除非显式设置为 true，否则跨域请求不会携带凭据。

当你设置 XMLHttpRequest 的 withCredentials 属性为 true 时，你告诉浏览器在发送跨域请求时携带凭据。例如：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

2. 服务器端响应：

当 withCredentials 设置为 true 时，服务器必须在其CORS响应头中包含 Access-Control-Allow-Credentials: true，以允许浏览器接受带有凭据的请求。同时，Access-Control-Allow-Origin 不能设置为通配符 *，而必须指定明确的源。

3. 安全性考虑：

允许跨域请求携带凭据可能会带来安全风险，因为它允许第三方网站访问敏感的用户数据。因此，只有当你完全信任目标源，并且需要在请求中包含用户凭据时，才应该将 withCredentials 设置为 true。

4. 现代浏览器和Fetch API：
在现代浏览器中，fetch API 也支持跨域请求。当使用 fetch 发起跨域请求时，可以通过设置 credentials: 'include' 来达到与 XMLHttpRequest 中 withCredentials: true 相同的效果。