Modern.js项目中BFF模式下自定义请求头跨域问题的分析与解决

问题背景

在使用Modern.js框架开发BFF(Backend For Frontend)服务时，开发者遇到了一个典型的跨域资源共享(CORS)问题。具体表现为：当客户端尝试向BFF服务发送带有自定义请求头(如'x1-Content-Type')的POST请求时，浏览器会拦截该请求并报出跨域错误；而如果移除自定义请求头，请求则能正常完成。

问题现象深度分析

通过问题重现可以观察到以下关键现象：

1. 客户端代码设置了自定义请求头'x1-Content-Type'，并尝试向不同端口的BFF服务发送POST请求
2. 服务端虽然已经配置了koa2-cors中间件，并设置了allowHeaders: ['*']等宽松的CORS策略
3. 浏览器仍然拦截了请求，报出CORS策略阻止了请求的错误
4. 当移除自定义请求头后，跨域请求能够正常完成

这表明问题不是出在BFF服务本身的CORS配置上，而是请求在到达BFF服务前就被拦截了。

根本原因

经过Modern.js团队成员的确认，这个问题实际上是由Modern.js底层依赖的rsbuild开发中间件的一个已知问题引起的。具体来说：

1. 在开发环境下，Modern.js使用rsbuild提供的开发服务器和中间件
2. 该中间件在处理请求时，未能正确转发带有自定义请求头的OPTIONS预检请求
3. 导致浏览器的预检请求无法获得正确的CORS响应头
4. 因此浏览器判定该跨域请求不安全，阻止了实际请求的发送

解决方案

Modern.js团队已经在最新版本中修复了这个问题。开发者可以通过以下步骤解决问题：

1. 升级项目依赖到最新版本
2. 运行npx modern upgrade命令更新项目配置
3. 重新启动开发服务器

升级后，开发中间件将能够正确处理带有自定义请求头的OPTIONS预检请求，使CORS机制正常工作。

技术要点总结

1. 现代Web开发中，跨域请求的安全策略由浏览器严格执行
2. 对于非简单请求(如带有自定义头的请求)，浏览器会先发送OPTIONS预检请求
3. 服务端必须正确处理预检请求，返回适当的CORS响应头
4. 开发工具链中的中间件可能会影响CORS处理流程
5. 保持开发工具链的更新是解决这类问题的有效方法

最佳实践建议

1. 在BFF开发中，始终关注CORS配置的正确性
2. 对于自定义请求头，确保服务端显式声明允许的头部
3. 定期更新项目依赖，获取最新的bug修复和安全补丁
4. 在遇到CORS问题时，使用浏览器开发者工具检查网络请求，特别是OPTIONS预检请求的响应
5. 考虑在生产环境和开发环境使用一致的CORS配置策略

通过理解这个问题的本质和解决方案，开发者可以更好地处理Modern.js项目中遇到的类似跨域问题，确保前后端协作的顺畅进行。