[Chrome extension] 讀取 https 資源時出現 No Access-Control-Allow-Origin 錯誤
我在圖書館多重帳戶登入這個 Chrome 擴充功能裡面，會去讀取 Dropbox 的一個檔案，
不過最近因為 Dropbox 將 Public 目錄設成非公開分享，
因此重新去取得了新的分享連結，再讓擴充功能去讀取，
但 Chrome 則在 console 裡吐出了下面的錯誤訊息：
|
XMLHttpRequest cannot load https://www.dropbox.com/s/mdxf2ng8xlegivc/NewTaipeiCityLibraryMultiLogin_LibraryOffDates.json?raw=1. Redirect from ‘https://www.dropbox.com/s/mdxf2ng8xlegivc/NewTaipeiCityLibraryMultiLogin_LibraryOffDates.json?raw=1’ to ‘https://dl.dropboxusercontent.com/content_link/wtGZxHUxJucns4bXd9m9apSuGVB6Qo7E11T2WwZhboaZNopKXUWFxMmGtEByF7ZO/file’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘chrome-extension://njmkhmgdnaoomcbcgfdkeeonhdfomnda’ is therefore not allowed access. |
參考了一下 Chrome: Cross-Origin XMLHttpRequest，
提到這個是指一般網頁會受到 same origin policy 的限制，
(CORS 指的是 Cross-Origin Resource Sharing)
但 Chrome 擴充功能較不受此限，只要在 manifest.json 裡有定義好對應的權限就可以了～
打開現在的 manifest.json 來看看，目前允許的權限是可以去讀取 http:// 開頭的網址：
{
"name": "圖書館多重帳戶登入",
"permissions": [
"http://*/*"
]
}
看來可能是因為 Dropbox 的新的分享連結是使用 https:// 開頭的，因此擴充功能沒有權限去讀
(雖然這個推論還是有點奇怪，因為原本的 Dropbox Public 目錄分享連結也是 https:// 開頭的)
修正方式是將 https:// 也加入 permissions 之中：
{
"name": "圖書館多重帳戶登入",
"permissions": [
"http://*/*",
"https://*/*"
]
}
將擴充功能重新載入之後，就能成功讀到 Dropbox 分享出來的檔案，
錯誤訊息也不再出現囉～