Chrome 114.x中跨域请求Clear-Site-Data: "cache"无法清除缓存问题

问题根源 #

控制台的错误信息已经直接点明核心原因：

Clear-Site-Data header on https://example.com/login: The request's credentials mode prohibits modifying cookies and other local data.

跨域AJAX请求的credentials模式安全限制，导致浏览器拒绝执行Clear-Site-Data的缓存清除操作。

具体原理 #

• 跨域请求默认的credentials模式为same-origin，该模式下浏览器不仅不会在请求中携带跨域凭证（如Cookie），还会禁止这类请求对目标站点的本地数据（包括缓存）进行修改。
• 你的响应头中设置了Access-Control-Allow-Origin: *，这种通配符配置与credentials模式兼容冲突，即使前端主动开启credentials，浏览器也会因安全策略限制拒绝执行数据修改操作。

修复步骤 #

1. 后端调整CORS配置

修改响应头参数：

• 将Access-Control-Allow-Origin从通配符*改为前端页面的具体域名（例如https://your-frontend-site.com）
• 添加Access-Control-Allow-Credentials: true响应头

调整后的关键响应头示例：

Access-Control-Allow-Origin: https://your-frontend-site.com
Access-Control-Allow-Credentials: true
Clear-Site-Data: "cache"

2. 前端调整请求配置

在发起跨域AJAX请求时，显式开启credentials模式：

• 使用Fetch API：

fetch('https://example.com/login', {
  method: 'POST',
  credentials: 'include', // 开启跨域凭证携带
  // 其他请求配置...
});

• 使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/login');
xhr.withCredentials = true; // 开启跨域凭证携带
// 其他请求配置...
xhr.send();

额外注意 #

Clear-Site-Data: "cache"仅会清除响应所属站点（即https://example.com）的缓存，如果你后续请求的是前端自身域名下的缓存，该响应头不会产生作用，需要针对前端域名单独处理。

内容的提问来源于stack exchange，提问作者Yuvaraj V