當您的業務接入阿里云CDN后,需要跨域共享或者訪問資源時,您可以通過節點HTTP響應頭來實現跨域訪問。
什么是跨域資源共享
跨域資源共享CORS(Cross-Origin Resource Sharing)簡稱跨域訪問,是HTML5提供的標準跨域解決方案,允許網頁從不同源加載和訪問跨域資源,使得跨域數據傳輸得以安全進行。更多信息可以參考跨域資源共享。
為什么要配置跨域資源共享
由于安全限制,瀏覽器一般會遵循同源策略(Same-Origin Policy),限制腳本發起的從不同域、子域、協議或端口加載和訪問資源的請求,例如example.com無法訪問example.org上的資源。通過配置跨域資源共享,可以在CDN服務器端設置相關的響應頭,如果訪問CDN資源時的請求攜帶了滿足允許規則內的請求頭,則返回對應的HTTP響應頭部,即可實現跨域資源的加載和訪問。
數據交互示意圖
未開啟跨域共享
Client向example.com發出請求,例如:http://example.com/index.html,example.com給client響應了文件index.html,但index.html通過腳本發起了請求:http://example.org/api。
Client向example.org發起請求時,攜帶了Origin:example.com,由于未開啟跨域共享,CDN默認不返回跨域頭,由于跨域限制,瀏覽器將攔截此請求的響應,導致報錯(頁面展示異常,顯示"No 'Access-Control-Allow-Origin' header is present on the requested resource"錯誤)。
開啟跨域共享后
Client向example.com發出請求,例如:http://example.com/index.html,example.com給client響應了文件index.html,但index.html通過腳本發起了請求:http://example.org/api。
Client向example.org發起請求時,攜帶了Origin:example.com,開啟跨域共享后,CDN將會校驗用戶請求頭中Origin的值與配置的Access-Control-Allow-Origin的值是否匹配(支持單個值或多個值的精確匹配及泛域名匹配),校驗成功后返回跨域頭,如:Access-Control-Allow-Origin:http://example.com。
Client收到響應后,檢查跨域響應頭為http://example.com,滿足跨域共享訪問策略,即可顯示相應結果。
注意事項
若使用OSS作為源站,OSS與CDN控制臺同時配置CORS,CDN的配置將覆蓋OSS的配置。OSS相關的跨域配置,請參見跨域設置。
若使用本地服務器或ECS實例作為源站,建議先進行動靜分離,靜態文件使用CDN加速,CDN控制臺配置的CORS功能,僅對靜態文件生效。
開啟跨域資源共享
登錄CDN控制臺。
在左側導航欄,單擊域名管理。
在域名管理頁面,找到目標域名,單擊操作列的管理。
在指定域名的左側導航欄,單擊緩存配置。
單擊節點HTTP響應頭頁簽。
單擊添加,配置節點HTTP響應頭。
請按照以下內容進行選擇,設置指定允許的跨域請求的來源,然后單擊確定保存配置。
參數
示例
響應頭操作
增加
自定義響應頭參數
Access-Control-Allow-Origin
響應頭值
*
說明響應頭值支持配置為“*”,表示任意來源。
響應頭值非“*”的情況下,支持配置單個或多個IP、域名,或者IP和域名混合。相互間使用半角逗號(,)隔開。
響應頭值非“*”的情況下,必須包含協議頭“http://”或者“https://”。
響應頭值支持攜帶端口。
響應頭值支持泛域名。
是否允許重復
不允許
說明允許表示允許重復,即源站返回的頭會保留,同時會加上一個同名的頭。
不允許表示不允許重復,即源站返回的頭會被新配置的同名頭覆蓋。
重要是否允許重復和跨域驗證這兩個配置項之間存在互斥,是否允許重復配置為允許的情況下,跨域驗證將會失效。
跨域驗證
開啟
說明跨域驗證只有在響應頭操作為增加,自定義響應頭參數為“Access-Control-Allow-Origin”的時候才可以配置。
跨域驗證取值為關閉和開啟,默認為關閉狀態。
關閉狀態下CDN節點不會校驗用戶請求中攜帶的Origin頭,只會固定響應已配置的“Access-Control-Allow-Origin”值。
開啟狀態下CDN節點將按以下規則對用戶做跨域校驗,并根據校驗結果響應“Access-Control-Allow-Origin”的值。跨域校驗規則如下所示:
任意匹配:自定義響應頭參數“Access-Control-Allow-Origin”的值設置為“*”時,不論用戶請求里面是否攜帶“Origin”參數,也不論攜帶的“Origin”參數為何值,都固定返回“Access-Control-Allow-Origin:*”。
精確匹配:自定義響應頭參數“Access-Control-Allow-Origin”的值設置了單個或者多個值(多個值之間用半角逗號“,”分隔)。
如果用戶請求頭里攜帶的“Origin”參數值與被設置的任意一個值精確匹配,就會響應對應的跨域頭。
如果都沒有精確匹配上,則不響應跨域頭。
泛域名匹配:自定義響應頭參數“Access-Control-Allow-Origin”的值設置了泛域名,則會校驗請求頭中Origin值是否能匹配上“Access-Control-Allow-Origin”的泛域名。
開啟狀態下,如果響應頭值中的域名包含短劃線
-
,需要對短劃線做轉義處理后再配置,將-
轉義為%-
。例如:原始響應頭值:
http://doc.aliyun-example.com
。轉義后的響應頭值:
http://doc.aliyun%-example.com
。
請設置指定允許的跨域請求方法,然后單擊確定保存配置。
參數
示例
響應頭操作
增加
自定義響應頭參數
Access-Control-Allow-Methods
響應頭值
GET、POST、PUT
說明如果您需要同時添加GET、POST、PUT,請使用半角逗號(,)隔開。
是否允許重復
不允許
說明允許表示允許重復,即源站返回的頭會保留,同時會加上一個同名的頭。
不允許表示不允許重復,即源站返回的頭會被新配置的同名頭覆蓋。
本文以不允許重復為例,現場可根據實際環境而定。
配置示例
示例一
如果跨域資源共享的響應頭值設置了單個或者多個值(多個值之間用“,”分隔):
如果用戶請求頭里攜帶的“Origin”參數值與被設置的任意一個值精確匹配,就會響應對應的跨域頭。
如果都沒有精確匹配上,則不響應跨域頭。
在CDN上設置:Access-Control-Allow-Origin:http://example.com,https://aliyundoc.com。
如果用戶請求攜帶的Origin頭是http://example.com,則CDN節點將會響應Access-Control-Allow-Origin:http://example.com。
如果用戶請求攜帶的Origin頭是https://aliyundoc.com,則CDN節點將會響應Access-Control-Allow-Origin:https://aliyundoc.com。
如果用戶請求攜帶的Origin頭是http://aliyun.com,則CDN節點將不會響應Access-Control-Allow-Origin(域名不匹配)。
如果用戶請求攜帶的Origin頭是http://aliyundoc.com,則CDN節點將不會響應Access-Control-Allow-Origin(協議頭不匹配,用戶請求的是HTTP協議,CDN上設置的是HTTPS協議)。
示例二
如果跨域資源共享的響應頭值設置了泛域名,則會校驗請求頭中Origin值是否能匹配上Access-Control-Allow-Origin的泛域名。
在CDN上設置:Access-Control-Allow-Origin:http://*.aliyundoc.com:
如果用戶請求攜帶的Origin頭是http://demo.aliyundoc.com,則CDN節點將會響應Access-Control-Allow-Origin:http://demo.aliyundoc.com。
如果用戶請求攜帶的Origin頭是http://demo.example.com,則CDN節點將不會響應Access-Control-Allow-Origin(域名不匹配)。
如果用戶請求攜帶的Origin頭是https://demo.aliyundoc.com,則CDN節點將不會響應Access-Control-Allow-Origin(協議頭不匹配,用戶請求的是HTTPS協議,CDN上設置的是HTTP協議)。
常見問題
為什么已經配置了響應頭Access-Control-Allow-Origin,但是訪問資源仍提示跨域問題,response header中沒有配置的響應頭?