Ad

Ionic Weird 'Access-Control-Allow-Origin' Issue

- 1 answer

Hello i built my ionic app, it worked, on a whole lot of devices, then just a couple of hours ago i tried to run the app on my phone and i noticed that for some reason data wasn't being returned from my web server. So i tried to run the app on my computer using ionic serve to see what was wrong and i noticed this error kept popping up every time i tried to make an $http request:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100'

My app has been running perfectly for weeks now, i do not know what could have changed to cause this. I use google canary for development, i have disabled web security. But even if the issue was with my browser that still does not explain why the app doesn't work on my phone in particular now. I was thinking it might have something to do with a new android update or something.

The only changes i have made to my computer recently are uninstalling my norton security antivirus and installing malwarebytes anti-malware and anti-exploit.

I have installed laravel-cors on my server. And set the setting at default like this:

<?php

return [
    /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |

     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*') 
     | to accept any value, the allowed methods however have to be explicitly listed.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['GET', 'POST', 'PUT',  'DELETE'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

I currently have no idea what is going on, i use a lenovo A6000 android phone for development. The android system webview version is 47.0.2526.100, the android OS version is 5.0.2.

I just installed the app on an old nokia x "android phone" with an android version of 4.1 and it works.

Let me clarify, by "not working" i mean all $http requests, the app itself opens and works normally.

Ad

Answer

Okay so my issue like I described in my post worked on some devices and not on some devices. I hmy post worked on some devices and not on some devices. I have no idea why.

As to the cause of the issue, why this started happening, once again i have no idea why.

In an attempt to try and resolve the issue i installed CORS with the following default settings:

<?php

return [
    /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |

     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value, the allowed methods however have to be explicitly listed.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

When the above didn't work I decided to check my server to make sure I had the Headers module installed because i noticed the "Access-Control-Allow-Origin" header wasn't being included in my response headers from the server.

I then proceeded to directly configuring my .htaccess file by adding this:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Credentials false
</IfModule>

However the above still did not make any difference at least not untill i commented out the global CORS middleware in my Kernel.php file.

It works perfectly now. :)

Ad
source: stackoverflow.com
Ad