Ionic CORS issue in google chrome

Question

I am trying to hit URL from browser through Ionic application and getting a CORS issue , the error is:

XMLHttpRequest cannot load http://school_mit.schnotify.com/api/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.10:8100' is therefore not allowed access.

Possible duplicate of [XMLHttpRequest cannot load https://www.\[website\].com/](http://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com) — Quentin, Dec 12 '16 at 10:20
you should first search on google or here before asking a question that has already thousands of answers — stackoverflow, Dec 12 '16 at 10:32

score 0 · Answer 1 · answered Dec 12 '16 at 11:05

0

You need to add http://192.168.2.10 as an allowed origin in your backend. Or you could use a proxy.

answered Dec 12 '16 at 11:05

raj

5,989
7
30
62

score 0 · Answer 2 · answered Dec 12 '16 at 11:26

CORS has to be enabled in the server side. Ionic applications work on Rest API. If you have a PHP back end you can use a framework like Slim and add these headers in your php file.

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token');
header("Access-Control-Allow-Headers: X-Requested-With");
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        exit(0);
}

/*Resr of server file*/

?>

These headers in the server side should solve most of the CORS problem. You can implement the same in other languages

distante · Accepted Answer · 2017-08-07T11:51:13.213

-1

I had the same problem, I just fixed using this Chrome Plugin It allows adds Allow-Control-Allow-Origin: * to the header so you can make Ajax request from any source.

In Chrome you can also use flags

chrome --disable-web-security

or

--allow-file-access-from-files --allow-file-

But I prefer to use the extension because you can turn it on just when you needed without changing your server settings.

edited Aug 07 '17 at 11:51

answered Dec 12 '16 at 11:03

distante

6,438
6
48
90

Please always explain your suggested fix. Why does this plugin work and what does it do? – WJM Aug 07 '17 at 11:38

Ionic CORS issue in google chrome

3 Answers3