AWS CloudFront CDN + S3 CORS 跨域访问的问题

在研究 https://observablehq.com/ 的载入数据的时候，咱们会发现若是你数据存在 S3 上使用 CloudFront 做为 CDN 的时候，你会发现数据库载入不进去。

提示错误：data6 = TypeError: Failed to fetch

实际上 F12 后，你会发现错误信息为：

Access to fetch at 'https://cdn.ossez.com/json/covid19/covid19-current.json' from origin 'https://dakoop.static.observableusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这个是提示跨域错误，显然这格式 AWS 的配置问题。

如何解决问题？

---

 

是否有跨域访问问题。

你能够在 cmd 中运行下面的命令进行确认：

curl -H "origin: example.com" -v "https://cdn.ossez.com/json/covid19/covid19-current.json"

若是没有返回须要的数据，那么说明你的 AWS 设置了跨域访问限制：

由于上面的限制，你须要调整 CloudFront 和 S3。

CloudFront

找到你的分发，而后找到你的要的 Behaviors，而后选择后进行编辑。

要从您的 CloudFront 分配转发标头，请执行如下步骤：

1. 从 CloudFront 控制台打开分配。

2. 选择行为选项卡。

3. 选择建立行为，或者选择现有行为，而后选择编辑。

4. 在基于所选的请求标头进行缓存中，选择白名单。

5. 在将标头列入白名单下，从左侧菜单中选择标头，而后选择添加。

6. 选择是，编辑。

注意：另外，请务必将标头做为请求的一部分转发到源。

CloudFront 分配的缓存行为容许 OPTIONS 请求

若是更新 CORS 策略并将相应的标头列入白名单后仍显示错误，请尝试在分配的缓存行为中容许 OPTIONS HTTP 方法。默认状况下，CloudFront 只容许 GET 和 HEAD 方法，但某些 Web 浏览器可能会发出 OPTIONS 方法的请求。

要在 CloudFront 分配中启用 OPTIONS 方法，请执行如下步骤：

1. 从 CloudFront 控制台打开分配。

2. 选择行为选项卡。

3. 选择建立行为，或者选择现有行为，而后选择编辑。

4. 对于容许的 HTTP 方法，选择 GET、HEAD、OPTIONS。

5. 选择是，编辑。

并进行下面的配置：

S3

针对 S3 你须要针对使用的 Bucket 设置 CORS 配置。

下面的配置，表示是针对全部的域名运行进行访问。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

保存后就能够进行测试了。

CloudFlare

若是你还使用了 CloudFlare 为缓存或者 CDN 或者 DNS 的话，你须要 Purge 全部页面。

要否则仍是可能由于 CloudFlare 的缓存而访问不了。

测试方法

由于不少公司都会使用多重缓存的方式对内容进行处理。

这里咱们须要依次肯定 S3 的 CORS 已经设置好了，而后肯定 CloudFront 的 CORS 已经设置好。

能够先在 S3 中设置某一个文件为 Public 而后运行命令：

curl -H "origin: example.com" -v "https://s3.us-east-2.amazonaws.com/com.ossez/json/covid19/covid19-current.json"

上面的命令是从 S3 中拉取数据，若是可以返回数据则代表 S3 的 CORS 没有问题。

当 S3 没有问题的时候，能够开始肯定 CloudFront 的配置没有问题。

运行命令：

curl -H "origin: example.com" -v "d2t9w2kkwoel2v.cloudfront.net/json/covid19/covid19-current.json"

肯定可以返回正常的数据。

若是能访问数据则说明 CloudFront CORS 没有问题。

在 DNS 中，你可能设置了 CNAME，可是你可能经过域名访问不了，那有多是你 DNS 的缓存的问题。

你须要找到 DNS 配置后从新刷新 DNS 的页面缓存和heard 缓存。

例如，咱们使用 CloudFlare 的 DNS 的 Purge 全部页面。

而后进行测试：

curl -H "origin: example.com" -v "https://cdn.ossez.com/json/covid19/covid19-current.json"

若是可以返回正确的数据，则说明全部的配置已经完成了。

 

https://www.cwiki.us/display/SpringBootZH/questions/57939099