12

I am trying to build a mobile app with ionic framework. When my application tries to connect server to get json ( server is web api and cors is enabled) it just returns 404 on genymotion and real device. But when I run application in browser with ionic serve everything work fine.

I am pretty sure CORS is functional. Here response header I got while application working in browser.

Response

Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:395
Content-Type:application/json; charset=utf-8
Date:Fri, 08 May 2015 20:24:04 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/7.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

Request : 

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, lzma, sdch
Accept-Language:tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:*******:14400
Origin:http://192.168.0.28:8100
Pragma:no-cache
Referer:http://192.168.0.28:8100/

Config.xml has <access origin="*"/> this line in configuration

in my app.js I removed X-Requested-With headers for all http calls.

.config(['$httpProvider', function($httpProvider) {

        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];  
    }
])

I simple use get requests to server in my factory classes.

$http.get(serverPath + "/api/mobilerest/mainPage");

When I run application in Genymode or real device, response is 404 and statusText is 'not found'. I am pretty sure web api is working, the cause for this behaviour is in ionic based apps, my app is local file and protocol is file:/// so Origin header is null the in request, then server returns 404. I also tried a local file without any server I get the same error like in application.

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:server:14400
Origin:null
Pragma:no-cache

Am I missing something ?

adt
  • 4,320
  • 5
  • 35
  • 54

2 Answers2

20

cordova-plugin-whitelist seems to be "mandatory" at present.

install it :

cordova plugin add cordova-plugin-whitelist

configure config.xml

You can keep your current setup with * or change for more restrictive rules

add a html policy on index.html, you shall add a Policy also. To authorise everything, here it is :

 <meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'
 'unsafe-eval'"
aorfevre
  • 5,034
  • 3
  • 21
  • 51
  • 1
    Thank you @aorfevre it worked. But why I couldnt find this information on anywhere :) – adt May 09 '15 at 09:55
  • Again thank you for sharing @aorfevre. Like adt I could not figure why it was working in the browser and not on my device – Leo Moore May 15 '15 at 06:48
  • This worked for me too. I am not sure why is this not added to any documentation. It has been discussed in some forums. – Vikram Shetty Jun 05 '15 at 08:34
  • Thanks Dude for this help :) – pixelbyaj Aug 29 '15 at 07:10
  • I came across the same issue from iOS emulator. I did have whitelist plugin installed and the html policy set on index.html. After I saw this post I removed the plugin and reinstalled it. That fixed my problem thanks!!! – LeandroG Jun 30 '16 at 01:49
  • I have some issue with Capacitor! Any ideas? – El7or Nov 25 '19 at 11:12
  • I assume that it is better for you to make a proper question for that @El7or as it may be linked to Capacitor precisly. – aorfevre Dec 02 '19 at 14:56
-1

you can just go into config .xml file and edit this line

<access origin="*://*/*" />

and you can call any data with out intruption of CORS in console thank you plz apply this code your ionic app

Sourabh Morwal
  • 1
  • 1