Huly-Selfhost项目中CORS跨域问题的解决方案

问题背景

在Huly-Selfhost项目的实际部署中，开发人员发现前端平台(运行在8087端口)与账户服务(运行在3000端口)之间存在跨域资源共享(CORS)问题。由于浏览器同源策略的限制，不同端口的服务默认无法直接进行跨域请求。

技术原理

CORS是现代浏览器实施的安全机制，它要求服务器明确声明允许哪些外部源访问其资源。当Web应用的前端和后端服务运行在不同端口时，必须正确配置CORS策略才能实现跨域通信。

解决方案

通过DNS和反向代理的巧妙结合，可以优雅地解决这个问题：

1. 修改前端配置
   将前端代码中的ACCOUNTS_URL从http://example.com:3000改为http://accounts.example.com。这样所有对账户服务的请求都将通过子域名发起，避免了端口差异导致的跨域问题。

2. 配置反向代理
   在Nginx或Apache中添加如下代理规则：

   server {
       listen 80;
       server_name accounts.example.com;
       
       location / {
           proxy_pass http://localhost:3000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

   这个配置将所有对accounts.example.com的请求转发到本地的3000端口服务。

实现要点

• DNS配置：需要在DNS服务商处设置*.example.com的泛解析记录
• 协议一致性：确保前后端使用相同的HTTP/HTTPS协议
• Header传递：反向代理需要正确传递原始请求头信息
• 生产环境建议：实际部署时应考虑启用HTTPS和适当的CORS头

方案优势

1. 完全符合浏览器安全策略
2. 无需修改后端服务代码
3. 保持了服务的可扩展性
4. 便于后续的负载均衡扩展

注意事项

• 确保服务器防火墙开放了3000端口
• 如果使用HTTPS，需要为子域名配置SSL证书
• 在本地开发环境可以使用hosts文件模拟DNS解析

这种解决方案不仅适用于Huly-Selfhost项目，对于任何需要解决前后端分离部署导致的跨域问题的Web应用都具有参考价值。