GitHub 檔案取得沒有 CORS 限制的網址

前一陣子赫然發現 GitHub Pages 中的檔案似乎都沒有 CORS 的問題，可以在瀏覽器中，以 fetch 隨意抓取各種檔案；不過，如果是 GitHub 專案儲存庫檔案，直接複製瀏覽時的檔案網址，就行不通了！

例如在 2020年分享過的「雄:3DP : Lenticular Card 雙變卡產生器」LenticularCard 專案中的範例模型檔的網址是：

• https://github.com/gsyan888/LenticularCard/blob/master/demo/lenticular-card-dog-cat-5x50-0_8.stl

如果要利用 Three.js 直接載入這個網址的 STL 模型，肯定會出現類似這樣的錯誤訊息：

Access to fetch at 'https://github.com/......' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

▋ 解決 CORS 的問題

GitHub 專案儲存庫檔案的網址會有 CORS 問題，怎麼辦呢？

將網址處理一下：

• 最前的「https://github.com」置換為「https://raw.githubusercontent.com」。
• 中間的 「blob/master」  置換為 「master」。

利用 Regular Expression 就可以輕鬆搞定：

replace('github.com', 'raw.githubusercontent.com').replace(/(blob)\/(master|main)/, '$2')

所以前面的模型檔的網址改用：

• https://raw.githubusercontent.com/gsyan888/LenticularCard/master/demo/lenticular-card-dog-cat-5x50-0_8.stl

這樣子就可以在網頁瀏覽器中順利地利用 JavaScript 載入模型檔案了。來測試一下:

STL模型網址：

▋ 轉換小工具

不免俗的，利用 JavaScript 寫個轉換式：

GitHub 檔案的網址：

無 CORS 問題的網址

?  

▋ API

看到有人利用呼叫 API 的方法取得檔案的相關資訊及內容，也滿有意思的，先記錄下來。

假設 GitHub 檔案的網址是 url，轉換為 API 的網址：

apiUrl = url.replace('github.com/','api.github.com/repos/').replace(/(blob)\/(master|main)/, 'contents');

這個網址可以取得 JSON 格式的檔案資訊，再利用其中的「git_url」，可以取得檔案的詳細內容(JSON 格式)，最後的「content」，以前面的 STL 模型檔來說，應該是用 base64 編碼過的資料，宣告一下編碼格式，在前面加上「data:application/sla;base64,」，就能直接給瀏覽器使用了。

也就是利用 API ，呼叫兩次也能取得檔案的資料。

▋ 相關連結

• 雄:3DP : Lenticular Card 雙變卡產生器