Naveen Kumar V Naveen Kumar V - 1 month ago 19
HTTP Question

Ionic - $http works in mobile device but in browser it shows CORS and preflight error

I am developing a mobile app using Ionic framework. I use $http (POST with custom header) and When I try

ionic serve

in browser(chrome, firefox, ...), i am getting

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

error. If I enable CORS plugin in chrome and try the same, i am getting

Response for preflight has invalid HTTP status code 405

error.

But everything works when I install it in my mobile(Android/IOS) using

ionic run android

or

ionic run ios

What is making my browser to restrict $http and why my mobile allows it.?
Is Webview different from browser?

for info:
- I am using (default) cordova plugins - console, device, splashscreen, statusbar, whitelist, keyboard

please help me here. Without proper understanding, I can not simply build mobile app. Thanks in advance.

EDIT 1

I am using REST API which handles custom Header requests. I am not allowed to modify the API code as of now, because it is running fine for native android app for a long time. The issue is when I am using Ionic and to my surprise it works in my Samsung Tab and IPad (when I run without livereload mode).

All I wanted to know is, what is causing my Browser to restrict and my Mobile device to work?

Isn't WebView in mobile device have the security policy like in Browsers?

Answer

Why my mobile app works fine but not in browser?

I am using cordova-plugin-whitelist in my Ionic project. It implements a whitelist policy for navigating the application webview. check source

To make browser work, define proxy in my ionic.config.json. But this is just a work around. For production we should make the server to allow it explicitly to whitelist the API call. check source

Comments