外观
跨域配置指南 🌐
什么是跨域? 🤔
跨域资源共享(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"
配置说明 📖
基础参数
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
enabled | boolean | 是 | false | 是否启用跨域配置 |
urls | string[] | 是 | - | 需要进行跨域配置的URL路径列表 |
规则参数
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
allow-origins | string | 是 | - | 允许访问的源地址,多个用逗号分隔 |
allow-methods | string | 是 | - | 允许的HTTP请求方法,多个用逗号分隔 |
allow-headers | string | 是 | - | 允许的请求头,多个用逗号分隔 |
allow-credentials | boolean | 否 | false | 是否允许携带认证信息 |
max-age | int | 否 | - | 预检请求缓存时间(秒) |
expose-headers | string | 否 | - | 允许浏览器访问的响应头 |
安全建议 🛡️
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. 浏览器调试
- 打开开发者工具 (F12)
- 切换到Network面板
- 勾选"Preserve log"
- 发起跨域请求
- 查看请求头和响应头
- 检查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. 性能优化
- 合理设置预检缓存时间
- 避免频繁的预检请求
- 优化响应头大小
需要帮助?🆘
如果遇到问题:
- 检查浏览器控制台错误信息
- 查看网关日志中的CORS相关记录
- 使用开发者工具分析请求/响应头
- 联系技术支持团队