Handling CORS Issues in Ionic

Question

I am creating an API using our API server script and trying to communicate with the API in the IONIC Framework application. I work, but continues to display a cross-source lock message:

Answer 1

When developing locally using ionic serveor ionic run/emulate -l -cwith the restart function enabled, Ionic creates a local dev server on port 8100 ( http://localhost:8100/) by default . originin this case localhost:8100, which, when you communicate with an external service via HTTP with CORS enabled, consider that the request is not trustworthy and therefore rejects it.

Ionic (http://blog.ionic.io/handling-cors-issues-in-ionic/), Ionic API , , origin, Ionic 1, Ionic v2.

Ionic v2

ionic.config.json proxies.

{
  "name": "project-name",
  "app_id": "xyz-projectid",
  "v2": true,
  "typescript": true,
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://the-real-api-host.com"
  }]
}

/api, https://the-real-api-host.com. api, http://my-custom-api.com/api/v2/, proxyUrl.

API

URL- API https://the-real-api-host.com /api. /api , Ionic .

. API, , / CORS.

Answer 2

, Ionic , ionic -serve. CORS - , , iOS WKWebView.

Cordova HTTP.

:

https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

Answer 3

Cors . , , , Cors,

Answer 4

, - Chrome "Allow-Control-Allow-Origin".

Answer 5

, Http Http- , cors. - Angular HtttClient. , ionic-native-http-connection-backend cordova HttpClient , Http native , . .