越光科技 | AWS CloudFront 轻松配置跨域策略助力高效开发的实践
什么是跨域请求
跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其他（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的用于控制不同域之间的资源访问。当前端应用需要访问不同域的API时，如果没有正确配置CORS，请求将被浏览器拦截。特别是当请求中包含Authorization 等敏感头部时，配置尤为重要。
适用场景
1. 前后端分离架构
· 前端应用部署在不同域名
· API请求需要携带 Authorization 认证信息
2. 多环境部署
· 开发、测试、生产环境使用不同域名
· 需要在不同环境间共享资源
3. 第三方API集成
· 需要调用第三方服务的API
· 请求需要携带认证信息
配置前提条件
在开始配置 CloudFront 的跨域策略之前，需要确保：
· 已创建 CloudFront分配
· 已配置源站(Origin)
· 了解需要允许跨域访问的域名
· 确认请求中包含的自定义头部信息
· 浏览器会通过预检请求来确认站点是否支持CORS，而预检通常使用OPIONS方法，因此首先要确保CloudFront能够支持OPTIONS方法，示例配置如下。
配置步骤
1. 创建响应头策略
· 登录 AWS Console，进入 CloudFront
· 选择 Policies -> Response Headers
· 创建新的响应头策略
在 Cross-origin resource sharing (CORS) [跨源资源共享（CORS）]面板中，选择 Configure CORS（配置 CORS）切换按钮并配置以下标头：
2. 配置 CORS 规则
Access-Control-Allow-Origin:
[指定允许的域名]
Access-Control-Allow-Headers:
Authorization,Content-Type,X-Requested-With
Access-Control-Allow-Methods:
GET,POST,PUT,DELETE,OPTIONS
勾选Access-Control-Allow-Credentials:true
选择 Create（创建）以创建策略。创建响应标头策略后，您可以将它附加到 CloudFront 分配中的某个缓存行为。
3. 将响应标头策略附加到现有分配（控制台）
· 选择 CloudFront 分配
· 编辑行为(Behavior)
·对于 Response headers policy（响应标头策略），选择刚才创建的。
·选择 Save changes（保存更改）以更新缓存行为。
配置跨域策略前
成功配置跨域策略后
注意事项
· 安全考虑
· 不要将 Access-Control-Allow-Origin
设置为“*”
· 明确指定允许的域名
· 仅允许必要的 HTTP 方法
· 缓存影响
· OPTIONS 预检请求不应被缓存
· 配置合适的 TTL
最佳实践
· 环境隔离
· 为不同环境配置不同的响应头策略
· 开发环境可以适当放宽限制
· 监控与告警
· 监控 CORS 预检请求的数量
· 设置异常请求告警
· 定期审查
· 定期检查允许的域名列表
· 及时移除不需要的配置
总结
通过合理配置 CloudFront 的跨域策略，我们可以:
· 确保携带 Authorization 的请求正常工作
· 提高开发效率
· 保持系统安全性
正确的跨域配置是构建现代Web应用的重要环节，通过CloudFront的响应头策略，我们可以轻松实现这一目标。而AWS CloudFront预置的简单但丰富的配置能够帮我们迅速配置，减少开发过程要处理的问题。
