Nb
Study
.com
🔍 请输入搜索关键字

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 是什么意思呢?

withCredentialsXMLHttpRequest 对象的一个属性。

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 相同的效果。