凭据模式

长念阅读约 3 分钟1 年前发布

凭据模式 (credentials mode) 是指在跨域请求中，浏览器如何处理跨域 cookie 和 HTTP 认证信息。它可以设置为以下三个值之一：

可选值	描述
omit	不带凭据，即不发送跨域 `cookie` 和 `HTTP` 认证信息。
same-origin	仅当请求的 `URL` 与调用脚本位于同一来源时才发送凭据。
include	总是发送凭据，即使是跨域请求。

使用方法

fetch

在使用 fetch() 方法发送请求时，您可以通过设置 credentials 选项来配置凭据模式。

fetch('https://example.com', { credentials: 'include' }).then((response) => {
  // 处理响应
});

XMLHttpRequest

在使用 XMLHttpRequest 发送请求时，您可以通过设置 withCredentials 属性为 true 来配置请求带有凭据。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.withCredentials = true;
xhr.send();

axios

使用 axios 发送请求时，您可以通过设置 withCredentials 选项为 true 来配置请求带有凭据。

axios.get('https://example.com', { withCredentials: true }).then((response) => {
  // 处理响应
});

信息

axios 没有提供直接设置凭据模式的选项，但可以通过设置 withCredentials 选项来实现类似的效果。当 withCredentials 设置为 true 时，跨域请求将会带上 cookie HTTP 认证信息以及客户端 SSL 证书。

常见问题

the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

当请求的凭据模式为 include 时，响应中的 Access-Control-Allow-Origin 头的值不能是通配符。

解决方案

调整后端接口响应头中的 Access-Control-Allow-Origin 为指定源，而不是通配符；
调整请求中不携带凭证信息，但如果接口必须经过 Authorization 认证，则需要手动添加该头字段。

const instance = axios.create({
  withCredentials: false, // 不允许携带凭证
  headers: {
    Authorization: `bearer ${getAccessToken()}`,
  },
});

instance.post(`https://example.com`, payload).then((res) => res?.data || {});

使用方法​

fetch​

XMLHttpRequest​

axios​

常见问题​

使用方法

fetch

XMLHttpRequest

axios

常见问题