CORS error on Device Ionic

Ionic Framework ionic-v3
1

i have a problem with CORS when i install built apk on my actual device. when i run app on emulator or with ionic serve or even with ionic run it works fine. after installing apk file on actual device on every HTTP request it gives this output:

{"_body": {"isTrusted": true}, "status": 0, "ok": false, "statusText": "", "headers": {}, "type": 3, "url": null}

here’s ionic info output and proxy config in ionic.config.json file.

cli packages: (/usr/lib/node_modules)

    @ionic/cli-plugin-proxy : 1.4.11
    @ionic/cli-utils        : 1.12.0
    ionic (Ionic CLI)       : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    Node              : v8.6.0
    npm               : 5.3.0
    OS                : Linux 4.4

ionic.config.json

{
"name": "myapp",
"app_id": "",
"type": "ionic-angular",
"integrations": {
    "cordova": {}
},
"proxies": [{
    "path": "/api",
    "proxyUrl": "https://www.someapi.com/"
}]}

config.xml

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
2

This only works when the CLI is running. On the real device this is not the case. you have to actually fix the CORS issue.

3

how to fix it on device do you have any suggestions?

4

Yes:

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: Remote Debug your Ionic App · ionic.zone Look at the console and network tabs for errors.

1 Like
5

i got this error

file:///api/shipping_new/do.php file not found
6

The local /api is not available, as I wrote above. you have to use the real URL in your code.

7

ok thank you for helping. i solved it

2 Likes
8

Hi Zuraa93,
Would you please let me know how you fixed?

I am facing same issue for android device.

3 Likes
10

How did you solve this? I am facing same problem.

11

Anyone know how to solve this CORS issue on a real device?

12

Hi
Can you please share to me code how to fix this issue?
I getting same issue on my ionic 4 project.
Please let me know. Thanks.

13

Hi all :wave:

For future reference, there is now a CORS Errors section in the Ionic docs: https://ionicframework.com/docs/faq/cors

Best,
Rodrigo

1 Like
14

Where & How do i fix this. The link you provided give details info but couldnt find the steps to solve this issue. Running Ionic app on Real device and due to CORS unable to run it :frowning:

15

@harshm90 The docs page does give you solutions depending on your situation at the last section, in some cases even with implementation examples in Express/Node.js (backend) and Ionic 4 (frontend): https://ionicframework.com/docs/faq/cors#solutions-for-cors-errors

16

But it is said that enabling

Access-Control-Allow-Origin to *

will be too risky and vulnerable to many hackers / attackers. So how can we allow without compromising the security?

17

You can perfectly use Access-Control-Allow-Origin: * as long as you are not using cookies or sessions for authentication or sensible things that may affect the security of your app. I’m not saying it will affect security, but that it might depending on your use case.

I made several REST APIs for Ionic apps and all run with Access-Control-Allow-Origin: *. Maybe I should rewrite this paragraph to make it clear :sweat_smile:

1 Like