圖片字體圖標訪問不正常？CDN直接403或404？防盜鏈擋了自家網站？QPS和CORS莫名其妙？

本文將總結百度云CDN使用過程中——回源HOST與源站地址，防盜鏈白名單Referer，IP訪問限頻QPS，跨域訪問CORS——這四大坑點，希望對各位有幫助

坑點一 回源HOST與源站地址

首先理一下兩者的區別：源站(包括主源站和備選源站)決定了回源時，請求到哪個IP

它的作用就是提供了一個IP地址，如果填入的是一個域名，則會在每次回源時自動解析該域名指向的IP(DNS中的CNAME記錄)

主源站不可用時將訪問備源站源站的配置回源HOST決定回源請求訪問到源站IP上的哪個站點

它的作用就是提供一個域名地址字符串，CDN將去源站IP的服務器上找這個域名地址

百度云CDN默認將其配置為加速域名回源HOST

如果要保持回源HOST的默認配置(加速域名)，就需要在虛擬主機上綁定該加速域名，如此例中需要在BCH上綁定cdn.pizyds.com，保證能直接通過瀏覽器訪問加速域名獲取網站靜態文件或頁面，否則會遇到BCH的404不存在提示。(本例采納)

提供一種最簡單的方法：將加速域名設為cdn.pizyds.com，回源HOST和主源站都設置為原網站www.pizyds.com。這樣訪問https://cdn.pizyds.com/wp-content/uploads/2018/02/logo-with-word-640.png時，CDN將從https://www.pizyds.com/wp-content/uploads/2018/02/logo-with-word-640.png獲取圖片，緩存至服務器，在后續訪問中提供給用戶

相關插件包括 WP Super Cache，完整CDN配置教程右轉百度～知道了原理，就可以有更多配置方案～

坑點二 防盜鏈白名單Referer

防盜鏈是樣又恨又愛的東西，配置錯誤，整個站的靜態資源都炸了。圖標或字體顯示不正常，也往往是這個原因。所以好多站長直接擱著不用，下面給出正確可用方案。防盜鏈配置

這里通常要寫入兩項或四項：https://www.pizyds.com/*

http://www.pizyds.com/*

https://cdn.pizyds.com/*

http://cdn.pizyds.com/*

(劃重點)如果網站部分元素出現了問題，就需要通過FireFox或Chrome的開發者工具(快捷鍵Ctrl+Shift+I)排查。下圖是防盜鏈白名單未填寫后兩項的情況：防盜鏈配置后出現403的情況

有4個請求被403拒絕，查看請求數據后發現這些請求的Referer域名均為https://cdn.pizyds.com/。這是我們cdn的加速域名，沒有在白名單中，當然被403。(自家人不認，有點滑稽..)實際上網頁對一某些圖標和字體的請求是由css發起的，而這些css又來自于cdn，Referer自然就是cdn的域名。在白名單里添上就解決了。

坑點三 IP訪問限頻QPS

這個坑其實不是很敏感，根據瀏覽器開發者工具反饋的來填：

在上一圖中篩選cdn.pizyds.com，顯示44個請求，2.22秒，平均下來QPS在20左右。但假設你的某個網頁有幾十張圖片，又恰好遇到了光速打開網頁的網友，QPS上到50+也不是不可能。

IP訪問限頻的初衷是防止CC攻擊流量爆炸，均衡起見，此例中設為60。

坑點四 跨域訪問CORS

這是最大坑點！！圖標字體腳本的css或js文件都會因為缺少這一配置而被瀏覽器拒絕，造成圖標字體無法正常顯示。

但是百度云CDN的配置面板沒有提供快捷的CORS開關，唯一存在的是對接BOS的跨域訪問配置，極易造成誤解。(該功能使用情況是：源站為BOS的Bucket，且此Bucket在BOS面板中設置了CROS，然后在CDN的配置框中填入Origins，CDN就繼承BOS的CORS配置提供跨域訪問)假的跨域CORS

強烈建議百度云加入CORS快捷啟用的開關。在此之前，我們可以從底層的HTTP頭實現CORS：通過HTTP頭配置CORS

如圖配置即可Access-Control-Expose-Headers *

Access-Control-Allow-MethodsGET,HEAD,POST,PUT

Access-Control-Allow-Originhttps://www.pizyds.com

配置HTTP頭

總結

百度云CDN終不是面向小白的，有點坑也正常，但是官方文檔也不是很厚呃。Pillars在建站初期用的是BOS+CDN實現免備案加速的，舉站遷入百度云后硬啃CDN，掉坑再自救。附上官方技術文檔：https://cloud.baidu.com/doc/CDN/index.html

作者個站上的本文：https://www.pizyds.com/bdy-cdn-config-tips/

總結

以上是生活随笔為你收集整理的百度云cdn设置州五年制大专_[百度云CDN]配置过程坑点集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。