跨域问题解决方案与 Kong 配置记录

 

​​问题背景​​
前端应用（部署于不同端口）访问后端服务时触发跨域问题，具体表现为：
• 浏览器控制台报错：CORS policy blocked request from origin 'http://{FE_HOST}:{FE_PORT}'

• 请求被拦截，后端响应头缺失 Access-Control-Allow-Origin。

---

​​问题发现过程​​

1. 现象描述
   • 前端访问地址：http://${FE_HOST}:${FE_PORT_1}/hvac-wind-fe/

   • 后端服务地址：http://${BE_HOST}:${BE_PORT}/hvac-service-application/

   • 请求因跨域被浏览器拦截。

2. 根因分析
   • 前后端部署在同一 IP 但不同端口，违反浏览器的同源策略（Same-Origin Policy）。

---

​​解决方案​​
通过 Kong API 网关 实现以下两种方式解决跨域问题：

1. 反向代理统一入口
   将前后端请求代理到同一域名和端口下，消除跨域根源。
2. CORS 插件动态添加响应头
   在 Kong 中配置 cors 插件，允许指定源的跨域请求。

---

​​Kong 配置说明

services:
  - name: fe-service
    host: fe-upstream
    path: /           # 服务内部请求路径
    routes:
      - paths:
          - /fe-path/  # 前端路由路径
  - name: bff-service
    host: service-upstream
    path: / 
    routes:
      - paths:
          - /bff-path/  # 后端路由路径

upstreams:
  - name: fe-upstream
    targets:
      - target: ${FE_UPSTREAM_HOST}:${FE_PORT}  # 前端服务地址
  - name: service-upstream
    targets:
      - target: ${BE_UPSTREAM_HOST}:${BE_PORT}  # 后端服务地址

---

​​关键配置解释​​

1. 服务与路由
   • 每个 service 对应一个应用（前端或后端），通过 host 关联到上游 (upstream)。

   • routes.paths 定义请求匹配路径（如 /fe-path/ 匹配前端请求）。

2. 反向代理
   • 所有请求通过 Kong 统一入口（默认端口 8000 或 8443）转发。

   • 示例请求流程：

   # 前端请求
   http://${KONG_HOST}:8000/fe-path/ → 转发到 ${FE_UPSTREAM_HOST}:${FE_PORT}
   
   # 后端请求
   http://${KONG_HOST}:8000/bff-path/ → 转发到 ${BE_UPSTREAM_HOST}:${BE_PORT}

3. CORS 插件（可选附加配置）
   • 若需进一步控制跨域策略，可全局或按服务启用插件：

   curl -X POST http://${KONG_ADMIN_HOST}:8001/plugins \
        --data "name=cors" \
        --data "config.origins=http://${FE_HOST}:${FE_PORT}" \
        --data "config.methods=GET,POST,PUT,DELETE" \
        --data "config.headers=Content-Type,Authorization"

---

​​验证步骤​​

1. 检查代理请求

   # 测试前端路由
   curl -I http://${KONG_HOST}:8000/fe-path/
   
   # 测试后端路由
   curl -I http://${KONG_HOST}:8000/bff-path/

2. 验证 CORS 响应头
   浏览器开发者工具中观察请求是否包含以下头：

   Access-Control-Allow-Origin: http://${FE_HOST}:${FE_PORT}
   Access-Control-Allow-Methods: GET, POST, PUT, DELETE

---

​​注意事项​​

1. 生产环境安全
   • 避免使用 Access-Control-Allow-Origin: *，按需指定具体源。

   • 启用 HTTPS（配置 protocols: https 并绑定证书）。

2. 监控与日志
   • 通过 Kong 的 http-log 或 prometheus 插件监控 API 状态。

   • 使用 Kong Manager 或 DecK 管理配置版本。

3. 变量替换规则
   • 实际部署时替换 ${FE_UPSTREAM_HOST}、${FE_PORT_X} 等为真实值（如 10.0.0.1:8014）。

   • 建议通过 CI/CD 管道注入环境变量。