Skip to content

跨域配置指南 🌐

什么是跨域? 🤔

跨域资源共享(CORS)是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),使得浏览器允许这些origin访问加载服务器的资源。

同源策略

  • 🏢 同源:协议、域名、端口都相同
  • 🏬 跨域:协议、域名、端口任一不同
  • 📨 跨域请求:从一个源向另一个源发起请求
  • 🚫 同源策略:浏览器默认阻止跨域请求的安全机制

基础配置 📝

快速上手配置

最简单的配置方式(开发环境推荐):

yaml
gateway:
  cors:
    enabled: true
    rules:
      - urls:
          - /**
        allow-origins: "*"  # 允许所有源
        allow-methods: "GET,POST,PUT,DELETE,PATCH,OPTIONS"  # 允许的HTTP方法
        allow-headers: "Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since"  # 允许的请求头
        allow-credentials: true  # 允许携带认证信息
        max-age: 3600  # 预检结果缓存时间(秒)
        expose-headers: "Authorization"  # 允许浏览器访问的响应头

生产环境配置示例

yaml
gateway:
  cors:
    enabled: true
    rules:
      - urls:
          - /api/**
        allow-origins: "https://www.example.com,https://admin.example.com"
        allow-methods: "GET,POST,PUT,DELETE"
        allow-headers: "Authorization,Content-Type,Accept,Origin"
        allow-credentials: true
        max-age: 3600
        expose-headers: "Authorization,X-Request-ID"

配置说明 📖

基础参数

参数类型必填默认值说明
enabledbooleanfalse是否启用跨域配置
urlsstring[]-需要进行跨域配置的URL路径列表

规则参数

参数类型必填默认值说明
allow-originsstring-允许访问的源地址,多个用逗号分隔
allow-methodsstring-允许的HTTP请求方法,多个用逗号分隔
allow-headersstring-允许的请求头,多个用逗号分隔
allow-credentialsbooleanfalse是否允许携带认证信息
max-ageint-预检请求缓存时间(秒)
expose-headersstring-允许浏览器访问的响应头

安全建议 🛡️

1. 生产环境配置原则

  • ⚠️ 严格限制允许的源地址,避免使用通配符
  • 🔒 只允许必要的HTTP方法
  • 📝 只允许必要的请求头
  • ⏰ 设置合理的预检缓存时间
  • 🔐 谨慎使用allow-credentials

2. 常见安全隐患

  • 🚨 使用通配符允许所有源
  • 🔓 开放不必要的HTTP方法
  • 🎯 允许过多请求头
  • 🍪 不当的凭证配置
  • 🔍 未限制预检缓存时间

常见问题 ❓

1. 跨域请求被拒绝

检查清单:

  • ✓ 请求的域名是否在allow-origins列表中
  • ✓ 使用的HTTP方法是否在allow-methods列表中
  • ✓ 请求头是否在allow-headers列表中
  • ✓ 如果需要携带认证信息,allow-credentials是否为true

2. Cookie无法传递

解决方案:

  • ✓ 确保allow-credentials设置为true
  • ✓ 前端请求配置withCredentials: true
  • ✓ allow-origins不能使用通配符
  • ✓ 检查Cookie的SameSite属性

3. 预检请求问题

  • ✓ 检查max-age配置是否合理
  • ✓ 确认OPTIONS请求是否被正确处理
  • ✓ 验证预检请求的响应头是否正确

调试技巧 🔍

1. 浏览器调试

  1. 打开开发者工具 (F12)
  2. 切换到Network面板
  3. 勾选"Preserve log"
  4. 发起跨域请求
  5. 查看请求头和响应头
  6. 检查Console中的错误信息

2. 常见错误信息及解决方案

Access to XMLHttpRequest has been blocked by CORS policy
  • 检查allow-origins配置
  • 验证请求方法是否允许
  • 确认请求头是否在允许列表中
Request header field X-Custom-Header is not allowed
  • 在allow-headers中添加自定义请求头
The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*'
  • 当allow-credentials为true时,不能使用通配符
  • 需要明确指定允许的源地址

最佳实践 💡

1. 分环境配置

yaml
# 开发环境
gateway:
  cors:
    enabled: true
    rules:
      - urls: ["/**"]
        allow-origins: "*"
        allow-methods: "GET,POST,PUT,DELETE,PATCH,OPTIONS"
        allow-headers: "*"
        allow-credentials: true

# 生产环境
gateway:
  cors:
    enabled: true
    rules:
      - urls: ["/api/**"]
        allow-origins: "https://www.example.com"
        allow-methods: "GET,POST,PUT,DELETE"
        allow-headers: "Authorization,Content-Type,Accept"
        allow-credentials: true
        max-age: 3600

2. 安全加固

  • 定期审查允许的域名列表
  • 监控异常的跨域请求
  • 记录跨域请求日志
  • 设置安全告警阈值

3. 性能优化

  • 合理设置预检缓存时间
  • 避免频繁的预检请求
  • 优化响应头大小

需要帮助?🆘

如果遇到问题:

  1. 检查浏览器控制台错误信息
  2. 查看网关日志中的CORS相关记录
  3. 使用开发者工具分析请求/响应头
  4. 联系技术支持团队