当前位置： 首页 > news >正文

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

news 2026/5/23 14:29:29

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, HEAD；GET, 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，自定义方式添加
详细配置信息
  1. 名称：为origin request输入名称，示例：CachePolicySupportCORS
  2. 说明-可选：为origin request输入描述，示例：CachePolicySupportCORS
  3. 源请求设置信息：
    • 标题：选择要包括在源请求中的标头，选择包括以下标题
    • 添加标头：选择现有标题元素或者创建自定义标题(最多10)，依次添加Origin、Access-Control-Request-Headers、Access-Control-Request-Method

配置完成后，更改CloudFront行为，使用新创建的源请求策略。

注意：为简化操作，也可以直接使用托管的源请求策略 Managed-CORS-S3Origin

2.2 使用源响应头策略

除源请求策略、缓存策略之外，亚马逊云科技在2021年为CloudFront添加了响应头策略（Response header policy），以便客户方便的修改返回给客户端的响应头。可使用默认的响应头策略或者根据需要自建。

相关配置项
  • 缓存键和源请求：建议使用缓存策略和源请求策略来控制缓存键和源请求，可选Cache policy and origin request policy (recommended)或Legacy cache settings
  • 缓存策略：选择现有缓存策略或创建新的缓存策略，如CachingOptimized、Default policy when CF compression is enabled
  • 源请求策略-可选：选择现有源请求策略或创建新的源请求策略
  • 响应标头策略-可选：选择现有的响应标头策略或创建一个新的响应标头策略，如SimpleCORS（Allows all origins for simple CORS requests）

注意：CloudFront Behavior配置响应头策略之后，需要在请求中带上Origin标头CloudFront才会返回CORS相关Header。

测试示例
liyxmse@3c22fb76243a ~%curl-I-H"Accept: image/png"https://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:"cac8758fcbf17dbe1b870e828d85b7a2"accept-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_Qe8PVLMxpsaPbA==age:127 liyxmse@3c22fb76243a ~%curl-I-H"Origin: https://exam.com"https://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:"cac8758fcbf17dbe1b870e828d85b7a2"accept-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_82j2KYGE2xPZ1JFhD1gXCP8Jkbu6RNyhZmvn1s0dikY6TTw7Q==age:150

2.3 使用CloudFront Function

某些情况下（比如H5游戏），客户端期望站点的返回中一直包含CORS相关的标头，此时使用前文提到的方法将失效。为使CloudFront固定返回CORS相关标头，需要使用CloudFront Function功能。

原理是在边缘节点返回结果给客户端之前，通过边缘节点上执行一段代码更改返回结果的标头。

CloudFront样例代码
functionhandler(event){varresponse=event.response;varheaders=response.headers;// If Access-Control-Allow-Origin CORS header is missing, add it.// Since JavaScript doesn't 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. 参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
  2. https://aws.amazon.com/cn/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-response-headers-policies/
  3. https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
  4. https://aws.amazon.com/cn/blogs/china/several-solutions-to-cloudfront-cross-domain-problem-cors/
http://www.jsqmd.com/news/588221/

相关文章：

  • AKTools实战指南：如何构建跨语言的金融数据API服务
  • 我的第一个commit
  • 学生党自动排版 AI 润色论文权威工具推荐（小白必备）
  • AIGC检测和论文查重同时超标怎么解决：两种问题的处理优先级分析
  • 在线支付系列（三）：Stripe 信用卡——一件跨境商品的卡支付之旅
  • 还在为百度网盘限速而烦恼？这款开源直链解析工具让你告别蜗牛下载！
  • 微信聊天记录解密完全指南：从数据困境到自主掌控
  • 本地AI聊天、交互助手（写给小白的LLM工具选型系列：第三篇）
  • 2026年市面上水泥罐公司，砂浆罐/卧式储油罐/地埋式油罐/热油罐/不锈钢储罐/滤油罐/化工原料罐，水泥罐生产厂家有哪些 - 品牌推荐师
  • 互联网大厂Java面试实录：从Spring微服务到AI Agent全流程场景深度解析
  • 7、Ansible之Playbook高级用法
  • 2025届最火的五大AI辅助论文神器实际效果
  • 如何判断提取的RNA是否可用？
  • TEI Inference Toolkit - 工业级Embedding/NLI /Reranking服务调用最佳实践
  • 在线支付系列（一）：一笔订单触发的支付之旅
  • 大模型转型指南：小白程序员轻松入门，高薪收藏必备！
  • Literal
  • 在线支付系列（四）：PayPal——一位海外买家的安全支付之旅
  • 星光护航 家校同行 多方联合点亮4·2世界孤独症日公益之光
  • 通过微软账号登录Windows远程桌面
  • AD转换
  • 避免多线程冲突
  • 如何构建一个高效的知识/信息资源管理体系？启雀的功能优势介绍
  • Union
  • NPDP总篇
  • 在线支付系列（二）：支付宝 微信支付——一杯咖啡的扫码之旅
  • Claude Code凯神实战指南－第六章：Plugins全攻略——一键安装海量扩展，还能自己造轮子
  • 2025届毕业生推荐的降重复率方案推荐
  • ComfyUI-Manager下载加速三阶段优化方案：从单线程到多线程的300%性能提升
  • 如何使用 UEFI Shell 执行 Hello World 程序