CloudFront 跨域问题（CORS）的几种解决方式

1. 背景说明跨域资源共享是一种基于 HTTP 头的机制该机制通过允许服务器标示除了它自己以外的其它 origin域协议和端口使得浏览器允许访问这些 origin 加载的资源。为了让CORS请求能正常工作浏览器通常会使用预检Preflight请求来验证服务端是否支持CORS。预检请求通常使用OPTIONS方法发起请求中会包含真实请求中会用到的头和方法。常见的CORS使用场景包括XMLHttpRequest发起api请求、加载CSS文件/字体文件等。在使用CloudFront对源站进行加速时可能会为不同的资源/接口服务分配独立的域名。如果配置不当就比较容易出现跨域资源共享CORS错误表现为浏览器报错无法加载静态资源或请求API接口。本文将根据源站对CORS支持情况及客户端需求介绍几种CloudFront CORS错误的解决方式。2. 解决CloudFront跨域资源共享问题的几种方式2.1 CloudFront配置前置条件如之前所述浏览器会通过预检请求来确认站点是否支持CORS而预检通常使用OPIONS方法因此首先要确保CloudFront能够支持OPTIONS方法示例配置如下配置项可选值自动压缩对象No / Yes查看器协议策略HTTP and HTTPS / Redirect HTTP to HTTPS / HTTPS only允许的HTTP方法GET, HEADGET, HEAD, OPTIONS结合实际需要,选择包含OPTIONS的选项GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE缓存HTTP方法默认情况下,将会缓存GET和HEAD方法2.1 使用源请求策略若CloudFront源站本身支持CORS则可通过配置源请求策略来使得CloudFront支持CORS。源请求策略应包含如下标头Origin下拉框选择Access-Control-Request-Method自定义方式添加Access-Control-Request-Headers自定义方式添加详细配置信息名称为origin request输入名称示例CachePolicySupportCORS说明-可选为origin request输入描述示例CachePolicySupportCORS源请求设置信息标题选择要包括在源请求中的标头选择包括以下标题添加标头选择现有标题元素或者创建自定义标题(最多10)依次添加Origin、Access-Control-Request-Headers、Access-Control-Request-Method配置完成后更改CloudFront行为使用新创建的源请求策略。注意为简化操作也可以直接使用托管的源请求策略 Managed-CORS-S3Origin2.2 使用源响应头策略除源请求策略、缓存策略之外亚马逊云科技在2021年为CloudFront添加了响应头策略Response header policy以便客户方便的修改返回给客户端的响应头。可使用默认的响应头策略或者根据需要自建。相关配置项缓存键和源请求建议使用缓存策略和源请求策略来控制缓存键和源请求可选Cache policy and origin request policy (recommended)或Legacy cache settings缓存策略选择现有缓存策略或创建新的缓存策略如CachingOptimized、Default policy when CF compression is enabled源请求策略-可选选择现有源请求策略或创建新的源请求策略响应标头策略-可选选择现有的响应标头策略或创建一个新的响应标头策略如SimpleCORSAllows all origins for simple CORS requests注意CloudFront Behavior配置响应头策略之后需要在请求中带上Origin标头CloudFront才会返回CORS相关Header。测试示例liyxmse3c22fb76243a ~%curl-I-HAccept: image/pnghttps://d2ppuuhvlo93jy.cloudfront.net/download.png HTTP/2200content-type: image/png content-length:99866date: Tue,12Apr202216:24:40 GMT last-modified: Thu, 07 Apr202209:44:15 GMT etag:cac8758fcbf17dbe1b870e828d85b7a2accept-ranges: bytes server: AmazonS3 vary: Origin x-cache: Hit from cloudfront via:1.1933f4fb3c49c9a37f5b5461deacd212c.cloudfront.net(CloudFront)x-amz-cf-pop: HKG60-C1 x-amz-cf-id: 6iqbH3ItfJ-PxtwcMWR3L4Sy8tBtmUjRrytr5z_Qe8PVLMxpsaPbAage:127 liyxmse3c22fb76243a ~%curl-I-HOrigin: https://exam.comhttps://d2ppuuhvlo93jy.cloudfront.net/download.png HTTP/2200content-type: image/png content-length:99866date: Tue,12Apr202216:24:12 GMT Last-modified: Thu, 07 Apr202209:44:15 GMT etag:cac8758fcbf17dbe1b870e828d85b7a2accept-ranges:bytes server: AmazonS3 access-control-allow-origin: x-cache: Hit from cloudfront via:1.1f7d57a4f9ccb4dee501ecb0c0d07fab4.cloudfront.net(CloudFront)x-amz-cf-pop: HKG60-C1 x-amz-cf-id:TrYa_82j2KYGE2xPZ1JFhD1gXCP8Jkbu6RNyhZmvn1s0dikY6TTw7Qage:1502.3 使用CloudFront Function某些情况下比如H5游戏客户端期望站点的返回中一直包含CORS相关的标头此时使用前文提到的方法将失效。为使CloudFront固定返回CORS相关标头需要使用CloudFront Function功能。原理是在边缘节点返回结果给客户端之前通过边缘节点上执行一段代码更改返回结果的标头。CloudFront样例代码functionhandler(event){varresponseevent.response;varheadersresponse.headers;// If Access-Control-Allow-Origin CORS header is missing, add it.// Since JavaScript doesnt allow for hyphens in variable names, we use the dict[key] notation.if(!headers[access-control-allow-origin]){headers[access-control-allow-origin]{value:*};console.log(Access-Control-Allow-Origin was missing, adding it now.);headers[access-control-allow-headers]{value:Origin, X-Requested-With, Content-Type, Accept};headers[access-control-allow-methods]{value:GET,POST,PUT, OPTIONS};}returnresponse;}配置方式CloudFront 行为配置如下其中ForceCORSHeaders为CloudFront Function名称响应标头策略-可选选择现有的响应标头策略或创建一个新的响应标头策略函数关联-可选信息选择要与此缓存行为关联的Edge函数,以及调用此函数的CloudFront事件函数类型CloudFront Function绑定事件查看器响应函数ARN/名称ForceCORSHeaders包括正文无关联借助CloudFront Function的边缘计算能力还可以实现边缘鉴权、AB测试等功能。3. 总结本文介绍了3种解决CloudFront CORS错误的方法对比如下方法使用难度成本特点源请求策略一般无额外成本需要源站支持CORS响应头策略简单无额外成本配置简单CloudFront Function较难会产生额外成本提供免费额度需要编写代码功能灵活选型建议如果需要快速让CloudFront支持CORS比较方便的方式是使用响应头策略如果需要CloudFront一直返回CORS标头信息或需要支持其他个性化标头/需求则可以使用CloudFront Function。4. 参考资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORShttps://aws.amazon.com/cn/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-response-headers-policies/https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/https://aws.amazon.com/cn/blogs/china/several-solutions-to-cloudfront-cross-domain-problem-cors/