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以及本文地址：
https://blog.fundebug.com/2017/04/07/solve-script-error/