[Capacitor] App 往外的連線出現 Access-Control-Allow-Origin 錯誤?

[Capacitor] App 往外的連線出現 Access-Control-Allow-Origin 錯誤?

解決了 App 和 iOS 上方狀態列混在一起的問題後,

接下來看到的問題是,app 裡往外打的 HTTP 請求,好像全都失敗了:

 

嗯… 用之前學到的 用 Safari 開發者工具找出 Cordova app 裡的 JavaScript 錯誤

開 Safari 來看看模擬器裡的 Web app 有什麼問題吧~

在 Console 這邊看到了一堆 Access-Control-Allow-Origin 的錯誤:

 

統整一下大概就是這幾項:

  • Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin
  • XMLHttpRequest cannot load https://book.tpml.edu.tw/logout due to access control checks
  • Failed to load resource: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin

 

不過不管是哪一個,都是 Access-Control-Allow-Origin 造成的問題。

因為 Web app 事實是是用一個類瀏覽器在打開 Web app 的網頁,

當 Web app 又往外打 HTTP 請求 (像我的 app 是朝圖書館的網頁發出請求),

瀏覽器會覺得是 Web app 網站本身在對圖書館網站跨站請求 (cross-site request)

而這個動作就會被 Access-Control-Allow-Origin 機制檢查,

確認圖書館網站可接受我的 Web app 網站的請求,才會送出。

這是瀏覽器的安全機制,因此 Cordova/Capacitor 這類 Web app 都會遭遇到問題。

 

在 Cordova 裡面,

我之前看到的是要利用像 cordova-plugin-advanced-http 這類 plugin,

來做出 Native 的 HTTP 請求,避開瀏覽器這層。

(不過我用起來又遇到了別的問題,像是 Cookie 的部分好像有些怪怪的…)

至於 Capacitor 裡要怎麼解決這個問題呢?

 

查了一下,這部分可以用 Capacitor Http API 來解決~

只要先在設定檔 capacitor.config.json 裡加上:

"plugins": {
  "CapacitorHttp": {
    "enabled": true
  }
}

 

這樣就會開啟 Capacitor HTTP API 的功能,

它會修補 (patch) JavaScript 裡的 fetch API 和 XMLHttpRequest,

把它們改成用原生函式庫的方式發出 HTTP 請求,

一樣是避開了瀏覽器的 CORS 限制~

 

改好設定檔案,重新編譯執行 app,

已經可以正常往外連線了:

 

再用 Safari 觀察一下 Web app,

剛剛一堆 Access-Control-Allow-Origin 錯誤消失了,

都變成了 CapacitorHttp.request:

這樣子 CORS 的問題算是解決囉~

(本頁面已被瀏覽過 49 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料