如何配置CloudFront实现同一主域名下前后端服务对接

前置校验 #

• 确认负载均衡器（ALB/NLB）已开启公网访问，安全组已放通 CloudFront 出口IP段、80/443端口，后端服务可正常响应请求
• 已在 AWS Certificate Manager（ACM）的 us-east-1 区域 申请包含 www.foo.com 和 api.foo.com 的多域名SSL证书（CloudFront仅支持us-east-1区域的ACM证书）

方案1：独立CloudFront分发承载api.foo.com（推荐，前后端流量完全隔离） #

1. 进入CloudFront控制台，点击创建分发
2. 源配置
   • 源域选择你使用的负载均衡器公网域名，不要选择自动关联的S3存储桶
   • 协议选择HTTPS only（需提前为ALB配置SSL证书）或匹配查看器协议
   • 其余源级配置保持默认即可
3. 默认缓存行为配置
   • 查看器协议策略选择重定向HTTP到HTTPS
   • 允许的HTTP方法选择GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE（覆盖所有后端接口需要的请求方法）
   • 缓存策略选择Managed-CachingDisabled（后端接口默认不需要缓存，如有特定缓存需求可自定义策略）
   • 源请求策略选择Managed-AllViewerAndCloudFrontHeaders-2022-06，将用户侧所有请求头、Cookie、查询参数完整透传给后端
   • 如需配置跨域，可直接选择预设CORS响应头策略，或自定义策略允许https://www.foo.com跨域访问
4. 分发全局配置
   • 备用域名（CNAME）处添加api.foo.com
   • 自定义SSL证书选择之前在us-east-1区域申请的包含api.foo.com的ACM证书
   • 其余配置保持默认，点击创建分发
5. 进入Route53控制台，打开foo.com托管区域，添加A记录：
   • 记录名称填api
   • 开启别名，选择别名指向CloudFront分发，选中刚创建的api对应CloudFront分发，保存记录
6. 等待CloudFront分发部署完成（通常5~10分钟），将React代码中的请求地址前缀替换为https://api.foo.com/即可正常调用后端接口

方案2：复用现有www.foo.com的CloudFront分发（可选，无需额外子域名） #

如果不要求必须用子域名访问后端，可直接在现有CloudFront分发中新增路径规则：

• 进入现有www.foo.com对应的CloudFront分发配置，切换到源选项卡，新增源指向负载均衡器域名
• 切换到行为选项卡，新增行为：路径模式填/api/*，源选择刚添加的负载均衡器源，缓存和透传配置和方案1保持一致即可
• 前端代码直接调用https://www.foo.com/api/xxx即可访问后端，不需要额外配置子域名和证书

• 跨域报错：可在CloudFront响应头策略中配置Access-Control-Allow-Origin: https://www.foo.com，也可以在后端服务/ALB侧配置该响应头
• 后端拿不到真实客户端IP：确认源请求策略已经开启X-Forwarded-For头透传，使用预设的全量透传策略可直接规避该问题
• 配置不生效：CloudFront配置修改后需要等待分发状态变为已部署才会全局生效，可在分发列表页查看部署进度

内容的提问来源于stack exchange，提问作者feldo badix