前一陣子赫然發現 GitHub Pages 中的檔案似乎都沒有 CORS 的問題，可以在瀏覽器中，以 fetch 隨意抓取各種檔案；不過，如果是 GitHub 專案儲存庫檔案，直接複製瀏覽時的檔案網址，就行不通了！
例如在 2020年分享過的「雄:3DP : Lenticular Card 雙變卡產生器」LenticularCard 專案中的範例模型檔的網址是：
如果要利用 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')
所以前面的模型檔的網址改用：
這樣子就可以在網頁瀏覽器中順利地利用 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 ，呼叫兩次也能取得檔案的資料。
發表文章
