如何通过纯JavaScript避免浏览器存储fetch请求响应头Set-Cookie中的Cookie

首先得纠正一个你可能的误解：credentials: 'omit'这个参数的作用是让浏览器在发送请求时，不携带当前域名下的Cookie，但它完全不影响服务器返回的Set-Cookie头被浏览器自动保存——只要是同域请求，浏览器默认就会处理响应里的Set-Cookie，把Cookie存在本地。这就是为什么你加了这个参数还是没用的原因。

针对你的场景（要给100多个页面复用模板，同时不想触发浏览器保存服务器返回的Cookie），我给你两个纯前端的可行方案，按推荐程度排序：

方案1：把模板改成ES模块导出字符串（最推荐，无Cookie问题+性能更好） #

这个思路完全绕开了HTTP请求的Cookie问题：把HTML模板转换成一个JS模块，直接导出HTML字符串，然后在你的JS文件里导入使用，不需要发fetch请求，自然不会收到带Set-Cookie的响应。

具体操作：

1. 把template.html改成template.js，内容如下：

export const cookieBannerTemplate = `
<div id="mytemplate"> 
   any text
</div>
`;

2. 修改你的cookie_consent.js，直接导入模板字符串并插入页面：

// 注意路径要和你的文件实际位置匹配
import { cookieBannerTemplate } from '/html_templates/template.js';

$(document).ready(function() {
  // 直接把模板字符串插入目标容器
  $('#cookie-banner-container').html(cookieBannerTemplate);
  console.log("DOMContentLoaded banner");
});

3. 别忘了在index.html里给引用cookie_consent.js的script标签加上type="module"，因为要使用ES模块：

<script src="js/cookie_consent.js" type="module"></script>

这个方案的好处是：没有额外的HTTP请求（模块会被浏览器缓存），完全避免了Cookie问题，同时代码更简洁，性能也更好，非常适合你100多个页面复用的场景。

方案2：用Service Worker拦截响应，移除Set-Cookie头 #

如果你必须保留HTML模板文件的形式，不想改成JS模块，可以用Service Worker在响应到达浏览器之前，把Set-Cookie头删掉，这样浏览器就不会保存这些Cookie了。

具体步骤：

1. 新建一个sw.js文件（放在项目根目录），内容如下：

self.addEventListener('fetch', (event) => {
  // 拦截你的模板文件请求
  if (event.request.url.includes('/html_templates/template.html')) {
    event.respondWith(
      fetch(event.request).then((originalResponse) => {
        // 克隆原始响应（因为响应流只能被读取一次）
        const newHeaders = new Headers(originalResponse.headers);
        // 移除响应头里的Set-Cookie
        newHeaders.delete('Set-Cookie');
        
        // 返回修改后的新响应
        return new Response(originalResponse.body, {
          status: originalResponse.status,
          statusText: originalResponse.statusText,
          headers: newHeaders
        });
      })
    );
  }
});

2. 在你的index.html里注册这个Service Worker（最好放在body末尾）：

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker 注册成功:', reg))
      .catch(err => console.log('Service Worker 注册失败:', err));
  });
}
</script>

3. 你的cookie_consent.js可以保持原来的fetch代码不变，不需要加credentials: 'omit'（加了也不影响）。

这个方案的缺点是需要配置Service Worker，初次加载会有一点额外开销，但好处是不用修改现有模板文件的格式。

备注：内容来源于stack exchange，提问作者fascynacja