Garfish微前端框架中的跨域Cookie携带问题解决方案

问题背景

在现代微前端架构中，主应用和子应用部署在不同域名下的情况十分常见。例如主应用部署在a.com，子应用部署在b.com。当用户在这两个系统都完成登录授权后，在微前端场景下，主应用加载子应用资源时可能会遇到跨域Cookie无法携带的问题。

问题分析

当主应用(a.com)尝试通过AJAX请求加载子应用(b.com)的资源时，由于浏览器的同源策略限制，默认情况下不会自动携带子应用域名下的Cookie。这会导致以下问题：

1. 子应用的静态资源如果需要进行服务端鉴权，请求将因缺少Cookie而失败
2. 用户虽然已在子应用系统完成登录，但在微前端环境下仍需重新认证
3. 传统的浏览器解决方案(如withCredentials)在微前端架构中需要特殊处理

Garfish解决方案

Garfish微前端框架提供了Loader Hook机制来解决这类跨域资源加载问题。通过自定义加载器生命周期，开发者可以精细控制资源请求的行为。

核心实现方式

1. 使用fetch加载资源：在自定义加载器中，使用fetch API而不是默认的script/link标签加载资源
2. 配置credentials：在fetch请求中设置credentials: 'include'选项，确保跨域请求携带Cookie
3. 处理响应内容：获取响应后，将内容转换为适合Garfish处理的格式

代码示例

Garfish.loader.setLifecycle({
  fetch: (url) => {
    return fetch(url, {
      credentials: 'include', // 关键配置，确保携带Cookie
      headers: {
        'Custom-Header': 'value' // 可添加自定义请求头
      }
    }).then(resp => {
      if (!resp.ok) throw new Error(resp.statusText);
      return {
        content: resp.text(),
        responseURL: resp.url,
        status: resp.status,
        contentType: resp.headers.get('content-type'),
      };
    });
  },
});

注意事项

1. 服务端配置：确保子应用服务端配置了正确的CORS策略，允许主应用域名的跨域请求，并设置Access-Control-Allow-Credentials: true
2. 安全性考虑：谨慎处理跨域Cookie，避免引入安全风险
3. 性能影响：相比直接使用script/link标签加载，fetch方式可能会有轻微性能开销
4. 兼容性：确保目标浏览器支持fetch API，或提供polyfill

总结

通过Garfish的Loader Hook机制，开发者可以灵活处理微前端场景下的跨域资源加载问题。特别是在需要携带Cookie进行服务端鉴权的场景下，自定义fetch实现并配置credentials参数是一个有效的解决方案。这种方法既保持了微前端的架构优势，又解决了跨域认证的难题。