GitHubリポジトリのファイルをクロスオリジンで配信する超簡単な方法


小ネタです。

ちょっとしたスクリプトを配信したいな〜というとき。

GitHubリポジトリのファイル実体が保管されているhttps://raw.githubusercontent.comから直接src属性などで引っ張ろうとしても、レスポンスヘッダにAccess-Control-Allow-Origin: *がないためCORSエラーで弾かれてしまいます。

CORS-Error
<script src="https://raw.githubusercontent.com/dojyorin/myrepo/master/dist/index.min.js"></script>

jsDelivrを使おう

実は、みんな大好きいつもお世話になっているjsDelivrさんからGitHubレポジトリのファイルへ クロスオリジン でアクセスできます!!

準備

jsDelivrでの配信準備はとても簡単。

  1. タグを発行する
  2. タグをpushする
  3. おわり

タグがリモートリポジトリと同期されると、jsDelivr側も即座に反映されます。

アクセス方法

タグが同期されたら、あとは以下のようにタグ名ごとのURLでアクセスできます。
タグ名をlatestにすれば常に最新版をロードできるのはいつもと変わりません。

CORS-OK
<script src="https://cdn.jsdelivr.net/gh/dojyorin/myrepo@tagname/dist/index.min.js"></script>