LoginSignup
4
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-29

小ネタです。

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

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>
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3