最近在 CodePen 測試一些 JavaScript 函式庫時發現無法直接從 GitHub 載入 JavaScript 檔案,發現直接在 CodePen 引入 Github raw 的 JavaScript 瀏覽器上是會噴錯的:because its MIME type ('text/plain') is not executable, and strict MIME type


because its MIME type ('text/plain') is not executable, and strict MIME type

這個錯誤是因為 Google Chrome 與 Internet Explorer 10 瀏覽器在載入網頁中的 JavaScript 資源時,會判斷該 JavaScript 的 Content-Type 標頭定義,如果回傳是 text/plain 就會導致載入的 JavaScript 無法執行,不過在 Firefox 與 Safari 瀏覽器並無此問題。

正常的情況下,JavaScript 的 Content-Type 是定義為 script 才可以正常執行


如何從 Github 引入 ?

當你在 GitHub 上取得 Raw 格式的 JavaScript 檔案,雖然可以取得完整內容,不過 GiHub 網站回應的 Content-Type 卻是 text/plain 內容型態,是會導致程式無法執行的

解決的方法,當然是修改伺服器上的 Conten-Type 內容,把 text/plain 換成 script , 不過,我們又無法修改 GitHub 上面的伺服器設定,還好,網路上有位名叫 Ryan Grove 的仁兄,建立了另一個 rawgithub.com 網站

目的就是回應正確的 Content-Type 讓其他網頁也能夠正確載入 GitHub 上面的檔案,使用方式如下:

只要將原先的 raw.githubusercontent.com 的網域,改成 [rawgithub.com](https://rawgit.com/) 就可以了

如下:

https://raw.githubusercontent.com/XXX/XXX/XXX.js

改成:

https://rawgithub.com/XXX/XXX/XXX.js

[rawgithub.com](https://rawgit.com/) 網域並不歸 GitHub 所有,建議用在測試環境即可

參考文章 : 如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案

Summary
[筆記]如何在 Codepen 引入 Github 的 JavaScript 檔案
Article Name
[筆記]如何在 Codepen 引入 Github 的 JavaScript 檔案
Description
最近在 CodePen 測試一些 JavaScript 函式庫時發現無法直接從 GitHub 載入 JavaScript 檔案,直接在 CodePen 引入 Github raw 的 JavaScript 瀏覽器上是會噴錯的:`because its MIME type ('text/plain') is not executable, and strict MIME type`
Author

Facebook 功能: