重定向后后续请求CORS错误：Origin头为null的解决求助

方法1：在Service Worker中拦截重定向，代理请求到最终资源 #

浏览器在跨域重定向时自动把Origin设为null是安全限制，无法直接绕过。可以让Service Worker自行处理重定向，避免浏览器发起二次请求：

修改你的Service Worker代码，在fetch请求中启用redirect: 'manual'，手动处理302响应后获取最终图片资源返回给页面：

self.addEventListener('fetch', async function (event) {
  // 仅处理domain-b.com的请求
  if (!event.request.url.includes('domain-b.com')) return;

  // 添加认证头，禁用浏览器自动重定向
  const authRequest = new Request(event.request, {
    headers: { Authorization: `Bearer <用户令牌>` },
    mode: 'cors',
    redirect: 'manual'
  });

  event.respondWith((async () => {
    const response = await fetch(authRequest);
    // 处理302重定向
    if (response.status === 302) {
      const redirectUrl = response.headers.get('Location');
      // 请求最终图片资源
      const imageResponse = await fetch(redirectUrl, { mode: 'cors' });
      // 构建响应并添加CORS头（确保兼容页面域名）
      const modifiedResponse = new Response(imageResponse.body, {
        status: imageResponse.status,
        statusText: imageResponse.statusText,
        headers: imageResponse.headers
      });
      modifiedResponse.headers.set('Access-Control-Allow-Origin', 'https://domain-a.com');
      return modifiedResponse;
    }
    return response;
  })());
});

这种方式下，页面只会与Service Worker交互，不会直接向domain-c发送请求，从根源上避免了Origin为null的问题。

方法2：用Lambda@Edge强制CloudFront返回CORS头 #

如果不想修改Service Worker，可以通过CloudFront的Lambda@Edge在响应阶段强制添加CORS头，忽略请求中Origin是否存在：

1. 创建Lambda函数（需选择us-east-1区域，满足Lambda@Edge部署要求），代码如下：

exports.handler = async (event) => {
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  // 强制添加允许domain-a的CORS头，也可设为*
  headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: 'https://domain-a.com' }];
  headers['access-control-allow-methods'] = [{ key: 'Access-Control-Allow-Methods', value: 'GET, HEAD, OPTIONS' }];
  headers['access-control-allow-headers'] = [{ key: 'Access-Control-Allow-Headers', value: '*' }];

  return response;
};

2. 将该Lambda函数关联到CloudFront的Viewer Response或Origin Response事件。这样无论请求是否携带有效Origin，CloudFront都会返回CORS头，解决浏览器因Origin为null导致的跨域错误。

为什么之前的尝试无效？ #

• 浏览器安全机制：跨域请求（携带Origin）被重定向到其他域名时，浏览器会自动将后续请求的Origin设为null，这一行为无法通过修改domain-b的响应头改变。
• CloudFront默认CORS逻辑：仅当请求的Origin匹配配置中的允许列表时，才会返回CORS头，空Origin不会触发该逻辑，常规配置因此无效。

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