我爱平铺

AWS CloudFront设置CORS允许跨域

首先复习一下跨域共享机制:

  1. CORS 通过 HTTP 请求中附带 Origin 的 Header 来表明自己来源域。例如上面的例子,Origin 的 Header 就是 www.a.com。
  2. 服务器端接收到这个请求之后,会根据一定的规则判断是否允许该来源域的请求。如果允许,服务器在返回的响应中会附带上 Access-Control-Allow-Origin 这个 Header,内容为 www.a.com 来表示允许该次跨域访问。如果服务器允许所有的跨域请求,将 Access-Control-Allow-Origin 的 Header 设置为星号(*)即可。
  3. 浏览器根据是否返回了对应的 Header 来决定该跨域请求是否成功,如果没有附加对应的 Header,浏览器将会拦截该请求。如果是非简单请求,浏览器会先发送一个 OPTIONS 请求来获取服务器的 CORS 配置,如果服务器不支持接下来的操作,浏览器也会拦截接下来的请求。

以上来自:https://help.aliyun.com/document_detail/31870.html

CloudFront作为CDN,一般不进行Origin的检查,而是由源端处理,例如S3或阿里云OSS。源端正确设置后,跨域仍然无法实现,有两个原因:

CloudFront默认忽略Origin等CORS相关header

控制台—>点击要配置的分发—>选中”行为”列—>选中某条行为配置行,点击”编辑”—>”白名单标头”添加如下标头

Access-Control-Request-Headers
Access-Control-Request-Method
CloudFront-Forwarded-Proto
Origin

需允许Options请求

还是在行为编辑页,“缓存的http方法“处勾选options

文章原始链接:https://sijie.wang/posts/cloudfront-cors/

本站文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请保留原始链接