4

I recently updated the ionic-cli and I am now trying to emulate an ionic app with the command ionic cordova emulate ios.

However, I am getting CORS errors with every api requests

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

I found that the ionic docs say this about the above command

Like running cordova emulate directly, but also watches for changes in web assets and provides live-reload functionality with the --livereload option.

It seems like that command also starts a server, which would explain why the origin is localhost instead of file://.

However, I tried emulating with cordova emulate ios, or building the app with ionic cordova build ios and running the output with the simulator, but I still get CORS errors.

Emulating on Android works fine and there is a proxy for running the app in the browser.

Any idea if I am on the right track and if there would be a way to emulate from file://? Would this problem persists when releasing the app to the App Store?

emroussel
  • 1,077
  • 11
  • 19

2 Answers2

1

The problem with CORS on iOS actually did not come from the ionic-cli, but from the fact that I switched to using WKWebView from UIWebview.

This blog post explains more about WKWebView and why it is much better than its predecessor.

It also mentions this concerning CORS:

UIWebview, or the older webview in iOS, never actually enforced CORS, but WKWebView does and does not provide a way to disable it. To address this, you need to implement CORS correctly and add the following entry:

Origin: http://localhost:8080

IF this is not possible (you do not own the API), a workaround can be to use the native HTTP plugin, @ionic-native/http.

So I enabled CORS on my api, and everything worked as before.

emroussel
  • 1,077
  • 11
  • 19
  • It enforces cors even if --consolelogs and --livereload doesnt activated? Before if the --consolelogs and --livereload not activated the request worked correctly – Hanzo Dec 13 '17 at 12:25
  • No, I was actually wrong about the cause of the problem. I also had recently switched over from `UIWebview` to `WKWebView`, and `WKWebView` does enforce CORS, whereas his predecessor didn't. – emroussel Dec 14 '17 at 15:30
0

try creating an ionic proxy, adding this code to ionic.config.json

"proxies": [{
    "path": "/api",
    "proxyUrl": "http://your-server.com"
}]

and then call your server simply with http.get('/api')

If it still not working, try using the cordova http plugin instead of angular http.

Marouan
  • 217
  • 1
  • 8
  • Thanks for your answer, but I already have a proxy set up when running the app in the browser. Before updating the ionic cli, the app when emulated on iOS had an origin of `file://`, but now the origin is `localhost`. I'm also wondering if the app on the App Store will have the same problem since building for production and release also creates CORS issues. – emroussel Sep 11 '17 at 02:37
  • i don't thnik prod will fix the issue, but try using https://ionicframework.com/docs/native/http/ instead of angularjs's http client. – Marouan Sep 11 '17 at 11:17
  • I actually need to use [authHttp](https://github.com/auth0/angular2-jwt) for authentication with my api, but I'm not sure changing the http client will fix the problem, since it will send the same headers with the requests (and same origin). – emroussel Sep 12 '17 at 13:14