Cloudflare Worker：如何同时返回Set-Cookie头与修改CSS的HTML响应

核心思路是同时完成HTML修改和Cookie设置，不需要依赖Cookie是否存在来分支处理——只要是非美加地区的请求，直接在同一个响应里既插入CSS样式，又设置Cookie，这样首次加载就能看到样式效果。

具体代码实现如下：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const country = request.cf?.country;
  const cookies = request.headers.get('Cookie') || "";
  const url = new URL(request.url);

  // 美国/加拿大地区直接返回原响应
  if (country === 'US' || country === 'CA') {
    return fetch(request);
  }

  // 非美加地区：一次完成HTML修改+Cookie设置
  const originalResponse = await fetch(request);
  // 读取原响应HTML内容（body只能读取一次，需先转文本）
  let html = await originalResponse.text();
  
  // 插入自定义CSS样式到body结尾
  const customStyles = '<style type="text/css">/* 替换为你的样式代码 */</style></body>';
  html = html.replace(/<\/body>/i, customStyles);

  // 基于修改后的HTML创建新响应，复制原响应的状态码、headers，再添加Cookie
  const modifiedResponse = new Response(html, originalResponse);
  modifiedResponse.headers.set('Set-Cookie', "new-int-pricing-mode=on;max-age=604800;Path=/;SameSite=Lax");
  // 如需设置多个Cookie，用append方法：modifiedResponse.headers.append('Set-Cookie', "其他Cookie内容");

  return modifiedResponse;
}

关键说明： #

• 避免重复请求：原代码两次fetch会浪费资源且可能导致响应体消费问题，这里仅一次fetch即可获取原响应内容。
• 首次加载生效：不管用户是否已有Cookie，只要地区符合就同时修改HTML和设置Cookie，无需等待第二次请求。
• 响应头复用：创建新响应时传入原响应作为参数，自动继承原响应的状态码、headers等属性，只需补充Set-Cookie头。

原方案问题分析： #

你之前通过Cookie分支的逻辑，首次请求仅设置Cookie不修改HTML，导致用户第一次加载看不到样式；第二次请求才因Cookie存在修改HTML，造成体验断层。现在的方案将两个操作合并到同一响应中，从根源解决了首次加载无样式的问题。

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