解决Cobalt项目自托管时的CORS跨域问题

在自托管Cobalt项目时，许多开发者会遇到跨域资源共享(CORS)问题。本文将深入分析问题原因并提供完整的解决方案。

问题现象

当使用Docker Compose部署Cobalt项目时，前端页面无法正常访问API接口，浏览器控制台会显示类似错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

根本原因分析

CORS问题的出现通常是由于以下几个配置错误：

1. 协议不匹配：前端使用HTTPS而API使用HTTP，或反之
2. URL格式错误：CORS_URL配置中包含多余的斜杠
3. 配置遗漏：前端容器未正确设置API_URL环境变量

完整解决方案

1. 检查并修正协议一致性

确保所有URL配置使用相同的协议（HTTP或HTTPS）。在本地开发环境中，通常使用HTTP协议。

2. 正确配置CORS_URL

在docker-compose.yml中，CORS_URL应遵循以下格式：

CORS_URL: "http://your-domain-or-ip:port"

注意：

• 不要包含末尾斜杠
• 使用与前端访问完全一致的协议和域名/IP

3. 完整的环境变量配置

确保两个服务都正确配置了相关环境变量：

services:
  cobalt-api:
    environment:
      API_URL: "http://192.168.1.6:9000"
      CORS_URL: "http://192.168.1.6:9001"
  
  cobalt-web:
    environment:
      WEB_URL: "http://192.168.1.6:9001"
      API_URL: "http://192.168.1.6:9000"

4. 验证配置

部署后，可以通过以下步骤验证配置是否正确：

1. 访问前端页面
2. 打开浏览器开发者工具
3. 检查网络请求中的"Origin"头是否与CORS_URL配置完全匹配
4. 确认响应中是否包含正确的CORS头

进阶建议

对于生产环境，建议考虑：

1. 使用Nginx等反向代理统一管理前端和API的访问
2. 配置HTTPS证书确保安全通信
3. 设置更严格的CORS策略，仅允许特定域名访问

通过以上配置，可以彻底解决Cobalt项目自托管时的CORS问题，确保前后端能够正常通信。