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