CloudFront托管前端调用AppSync为何未被CORS拦截？

核心原因：AppSync默认适配Amplify的CORS配置 #

当你通过AWS Amplify管理AppSync GraphQL API时，Amplify会自动帮你配置符合前端跨域需求的CORS规则：

• 它会识别你前端项目的域名（包括CloudFront分发的独立域名），并将其添加到AppSync的允许源列表中
• AppSync API在响应请求时，会返回Access-Control-Allow-Origin响应头，值精准匹配你的CloudFront域名（而非宽泛的*，保障安全性）
• 同时还会返回Access-Control-Allow-Methods（包含GraphQL常用的POST、OPTIONS等方法）、Access-Control-Allow-Headers（包含Content-Type、Authorization等必要请求头），这些头会被浏览器的CORS校验逻辑认可，因此不会拦截跨域请求。

Amplify客户端的自动适配 #

你项目中使用的aws-amplify客户端库也会帮你处理跨域相关细节：

• 当需要发送预检OPTIONS请求时，客户端会自动生成符合规范的请求，AppSync会正确响应这些预检请求，通过浏览器的校验
• 即使你用独立配置的CloudFront托管前端，只要在Amplify控制台或通过amplify update api命令配置了允许的前端源，AppSync就会放行对应域名的请求。

验证方法 #

你可以通过浏览器开发者工具的「网络」面板，查看AppSync API的响应头，确认是否存在以下关键头：

• Access-Control-Allow-Origin: [你的CloudFront域名]
• Access-Control-Allow-Methods: POST, GET, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization

如果这些头存在且匹配你的前端域名，就说明CORS配置生效，浏览器不会拦截跨域请求。

内容的提问来源于stack exchange，提问作者Julian Dm