iT邦幫忙

0

如何解決IONIC 4 CORS的問題

CORS = Cross origin resource sharing 是跨域分享共享

當我們deploy Ionic 到 Android 或 IOS 是不會有CORS的問題. 但是如果在 development mode 使用 ionic serve 訪問遠端的API就會遇到下面的問題

XMLHttpRequest cannot load http://api.ionic.com/endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8100' is therefore not allowed access.

通常如果你有權限更改遠端Server的話, 可以設定接受任何來源的請求, 但是當你使用第三方的API,就要另尋他法.
這裡我提供的方法是更改IONIC端的設定.

首先在IONIC的Root 資料夾建立proxy.conf.json. 裡面的內容:

{
    "/endpoint": {
       "target": "http://api.ionic.com",
       "changeOrigin": true,
       "secure": false,
       "logLevel": "debug"
     }
}

接著在http request 使用相對應的 path

 return this.http.get("/endpoint");

最後使用 ionic serve -- --proxy-config proxy.conf.json 開啟本地的伺服器.
以下連結提供更詳細的Angular代理配置
https://juejin.im/post/5d36fe605188255b5620a648


尚未有邦友留言

立即登入留言