切换www与非www域名时Google云存储桶出现CORS错误

问题原因 #

你遇到的问题核心是浏览器的CORS响应缓存机制：

• 首次访问https://www.subdomain.domain.com时，浏览器向GCS存储桶请求资源，存储桶返回精确匹配的Access-Control-Allow-Origin: https://www.subdomain.domain.com，该响应（包含CORS头）被浏览器缓存。
• 不清缓存直接访问https://subdomain.domain.com时，浏览器复用之前缓存的资源响应，但当前页面的Origin是https://subdomain.domain.com，与缓存响应头中的Origin值不匹配，触发CORS错误。

GCS的CORS机制本身正常——它会根据请求的Origin返回对应的精确匹配值，但浏览器默认不会根据Origin区分同资源的缓存，除非明确配置缓存规则要求区分。

能否通过存储桶CORS配置解决？ #

直接修改CORS规则无法解决，因为CORS规范要求Access-Control-Allow-Origin只能返回单个Origin或*，GCS不支持返回多个Origin值。但可以通过调整资源缓存元数据或统一域名来解决，具体方案如下：

方案1：给资源添加Vary: Origin缓存头 #

通过Vary: Origin头告诉浏览器，需根据请求的Origin字段缓存不同版本的资源响应，这样不同Origin请求同个资源时，浏览器会存储各自对应的响应，不会复用错误的CORS头。

使用gsutil命令批量修改存储桶内资源的元数据：

# 为存储桶内所有资源设置缓存控制和Vary头
gsutil setmeta -h "Cache-Control: public, max-age=3600, must-revalidate" -h "Vary: Origin" gs://[your-bucket-name]/**

也可在GCS控制台设置存储桶的默认对象元数据，让后续上传的资源自动带上这些头：

1. 进入目标存储桶的控制台页面
2. 点击「配置」→「默认对象元数据」
3. 添加两组键值对：
   • 键：Cache-Control，值：public, max-age=3600, must-revalidate
   • 键：Vary，值：Origin

方案2：统一域名（推荐） #

将www.subdomain.domain.com和subdomain.domain.com重定向到同一个域名，从根源避免跨Origin请求同资源的情况：

• 在App Engine的app.yaml中添加重定向规则（以www跳转到non-www为例）：

  handlers:
    - url: /.*
      script: auto
      secure: always
      redirect_http_response_code: 301
      redirects:
        - from: https://www.subdomain.domain.com/*
          to: https://subdomain.domain.com/\1
  

• 或在SvelteKit的hooks.server.ts中处理重定向：

  export async function handle({ event, resolve }) {
    const url = new URL(event.request.url);
    if (url.hostname === 'www.subdomain.domain.com') {
      url.hostname = 'subdomain.domain.com';
      return new Response(null, {
        status: 301,
        headers: { Location: url.toString() }
      });
    }
    return resolve(event);
  }
  

方案3：放宽CORS规则（不推荐） #

如果资源完全公开，可将CORS规则中的origin设置为*，存储桶会返回Access-Control-Allow-Origin: *适配所有Origin，但这会降低安全性，仅适合无敏感内容的公开资源：

[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD"], "origin": ["*"], "responseHeader": ["Content-Type"]}]

SvelteKit相关注意事项 #

• 确保SvelteKit构建生成的资源URL未硬编码特定域名，避免不必要的跨Origin请求。
• 若使用adapter-static部署，可在构建脚本中添加gsutil命令，自动为静态资源设置正确的缓存元数据。

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