Amazon CloudFront CDN + s3 源站跨域配置
Amazon CloudFront CDN + s3 源站跨域配置
问题描述
使用 Amazon CloudFront CDN + s3 源站托管前端静态页面，前端跨域请求时报错：
...blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方法
配置 Amazon CloudFront CDN 和 s3 支持跨域请求
1. s3 存储桶添加 CORS 配置
存储桶—>权限—>CORS配置，添加类似下面 xml 格式的 CORS 配置：
<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule><AllowedOrigin>*</AllowedOrigin><AllowedMethod>HEAD</AllowedMethod><AllowedMethod>PUT</AllowedMethod><AllowedMethod>GET</AllowedMethod><MaxAgeSeconds>3000</MaxAgeSeconds><ExposeHeader>x-amz-server-side-encryption</ExposeHeader><ExposeHeader>x-amz-request-id</ExposeHeader><ExposeHeader>x-amz-id-2</ExposeHeader><AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>
s3 CORS 相关配置项说明：
<AllowedOrigin>*</AllowedOrigin>: 允许访问来源，* 表示允许所有来源访问，具体根据实际情况配置；<AllowedMethod>HEAD</AllowedMethod>: 允许的请求方法：GET、PUT、POST、DELETE、HEAD，不包含 OPTIONS 请求；<MaxAgeSeconds>3000</MaxAgeSeconds>: 指定在 Amazon S3 针对特定资源的预检 OPTIONS 请求做出响应后，浏览器缓存该响应的时间（以秒为单位，在本示例中为 3000 秒）。通过缓存响应，在需要重复原始请求时，浏览器无需向 Amazon S3 发送预检请求。- 其他配置项解释见这里：https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/cors.html
使用 curl 测试存储桶 CORS 配置是否正确：
curl -I -v -L -H 'origin: <跨域请求的来源域名>' <s3资源地址>
如果响应头中有如下请求头，则表示配置正确：
Access-Control-Allow-Origin: <curl 请求时 -H 参数指定的值>Access-Control-Allow-Methods: <s3 存储桶 CORS 配置指定的请求方法>
2. CloudFront 分发行为中配置正确的"白名单标头":
打开 Amazon CloudFront 控制台—>点击要配置的分发—>选中"行为"列—>选中某条行为配置行，点击"编辑"—>"白名单标头"添加如下标头（CORS 相关配置，必须得添加，否则跨域请求时会出问题）：
Access-Control-Request-HeadersAccess-Control-Request-MethodCloudFront-Forwarded-ProtoOrigin
3. CloudFront 缓存行为允许 OPTIONS 请求：
打开 Amazon CloudFront 控制台—>点击要配置的分发—>选中"行为"列—>选中某条行为配置行，点击"编辑"—>“缓存的 HTTP 方法” 下面勾选 OPTIONS 复选框
相关资料
https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/cors.html
https://aws.amazon.com/cn/premiumsupport/knowledge-center/no-access-control-allow-origin-error/?nc1=h_ls
Amazon CloudFront CDN + s3 源站跨域配置相关推荐
- 绕cdn找源站ip（提供思路）
这是一个总结帖,查了一下关于这个问题的国内外大大小小的网站,对其中说的一些方法总结归纳形成,里面具体发现ip的方法不是原创,所有参考的原贴都也贴在了后面,大家可以自行看看原贴. 首先,先要明确一个概念 ...
- 关于自建cdn使用时的跨域问题
使用cdn获取静态资源能大大减小项目体积,减轻服务器压力,比如jQuery.min.js这些资源文件 但是我在使用的时候又踩了一些坑,这里分享一下 一开始是没有搭建好cdn的目录结构,导致组件在引用资 ...
- Spring Security(七) ——跨域配置
一:CORS跨域简介 CORS (Cross-Origin Resource Sharing )是由W3C制定的一种基于 HTTP 头的跨域资源共享技术标准,其目的就是为了解决前端的跨域请求,该机制通 ...
- html 跨域_常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
- ASP.NET Core微服务(三)——【跨域配置】
ASP.NET Core微服务(三)--[跨域配置] 对应练习demo(跨域)下载路径(1积分):[https://download.csdn.net/download/feng8403000/151 ...
- 常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
- nginx 实现备案域名的配置 + 跨域配置
前言 又到了记录的时候,摸鱼一时爽,摸到火葬场,摸鱼有风险,不要摸鱼了!!! (对自己的不满) ying宝的课上讲到了负载均衡.分布式缓存.分库分表等等等等提高服务并发性能的方法,总而言之,都是一些提 ...
- SpringCloud Gataway 跨域配置
SpringCloud Gataway 跨域配置 Spring Boot版本:2.3.4.RELEASE Spring Cloud版本:Hoxton.SR8 一.通过配置文件配置跨域 spring:c ...
- Nginx跨域配置、防盗链配置
跨域配置 当出现403跨域错误的时候No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Ng ...
最新文章
- 科大星云诗社动态20210818
- 中国华南：狼性创业者的天堂
- 微信公众平台的服务号和订阅号
- 卸载ncurses_linux中使用ncurses出现中文乱码解决方法
- jquery datatable设置垂直滚动后，表头(th)错位问题
- Java入门到精通——基础篇之static关键字
- vue读取服务器文件跨域,新版vue-cli模板下本地开发环境使用node服务器跨域的方法...
- Python的类示例
- mysql mongodb插件_FLinkX的Mongodb插件优化(三)
- [VB]用记录集填充表格函数
- c语言例题 3/100
- Java业内主流框架你知道吗？SSH和SSM有什么区别？
- 07 ，矩阵的转置，矩阵的行列式，方阵 ( 2阶行列式，3阶行列式，n 阶行列式 ) ：
- linux svc作用,[svc]linux性能监控
- 2016年我国网络安全态势
- python之父：一个合格的python程序员，应该从这三本书入手！
- Windows 10 全新界面要来了：焕然一新！
- vmvare打开虚拟机时报错：vmx文件已损坏
- 笔记本CPU更换硅脂、液金散热对比测试
- 词频统计以及分析（词云制作）