Script error.解決方案
為了加快網站訪問速度,我們不可避免要將靜態資源放到第三方CDN上。然而,我們又需要在出錯以後能夠知道詳細的報錯資訊,這篇部落格將介紹如何避免出現Script error.
1. 新增 crossorigin="anonymous"
到script標籤
<script src="https://xxx.com/xxx.js" crossorigin="anonymous"></script>
crossorigin
可以取列舉值anonymous
或則use-credentials
。
The “anonymous” keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication
anonymous即不傳送Cookie和HTTP認證資訊,對於靜態資源,我們使用anonymous
就已經足夠。 關於crossorigin詳情可以參考: CORS settings attributes
2. 新增支援跨域訪問的設定
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin是HTML5中定義的一種解決資源跨域的策略。他是通過伺服器端返回帶有Access-Control-Allow-Origin標識的Response header,用來解決資源的跨域許可權問題。
CDN服務商比如七牛預設已經配置好了Access-Control-Allow-Origin,使用curl
curl --head https://js.fundebug.cn/fundebug.0.0.4.min.js | grep "Access-Control-Allow-Origin"
結果如下:
如果您有單獨的子域名(子域名也會被認定為不同源)用來分發靜態資源,那麼需要在服務端做一點配置。針對不同語言和框架的配置方法我們不一一列出,Nodejs的Express框架下是這樣配置的:
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); next(); });
其它設定Access-Control-Allow-Origin請參考
- PHP: ajax 設定Access-Control-Allow-Origin實現跨域訪問
- Java: Java 無法跨域問題(No ‘Access-Control-Allow-Origin’…)
- Nginx: nginx Access-Control-Allow-Origin css跨域
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!
版權宣告
轉載時請註明作者Fundebug以及本文地址: