網站如果使用阿里云 CDN 的時候,圖片(使用oss、或者其他圖床的圖片)、圖標字體可能會碰到無法顯示或者無法訪問的問題。這可能就是碰到了 CDN 的跨域問題。
一般在瀏覽器的控制臺出現下面的錯誤信息:No 'Access-Control-Allow-Origin' header is present on the requested resource。
- Access to XMLHttpRequest at '****' from origin '*********' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
這是跨源資源共享 (CORS) 機制造成的,或通俗地譯為跨域資源共享。該機制使用附加的 HTTP 頭來告訴瀏覽器,是否允許運行在一個源上的 Web 應用訪問位于另一不同源的資源。
當一個 Web 應用發起一個與自身所在源(域,協議和端口)不同的 HTTP 請求時,它發起這個 HTTP 請求的即跨源 HTTP 請求。
那么,如何解決這個問題呢?只需要按以下步驟,在 CDN 設置一下跨域訪問
- 登錄阿里云 CDN 控制臺。
- 在域名管理頁面,選擇 CDN 的域名,單擊管理。
- 單擊「緩存配置」 -「HTTP頭」,單擊添加。配置參數,選擇「Access-Control-Allow-Origin」參數,取值請根據現場環境而定,如果不清楚直接輸入 * 即可。
原文地址:https://www.suxing.me/wp-courses/2231.html