Getting Error " No 'Access-Control-Allow-Origin' header is present on the requested resource." in ionic2

Question

I am trying to fetch data using WebApi which runs on localhost:58682/home/index1 in Ionic2 app which runs on localhost:8100.
I am getting the following error message.

XMLHttpRequest cannot load http://localhost:58682/home/index1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

My service.ts file

 @Injectable()
export class ResponseService{
 
 private responseUrl='http://localhost:58682/home/index1';
   getresponseDetails()
    {
        return this.http.get(this.responseUrl).map(res=>res.json());
    }
    }

ionic.config.json

{
  "name": "App",
  "app_id": "90594fdf",
  "type": "ionic-angular",
  "proxies":[
    {
      "path":"/home",
      "proxyUrl":"http://localhost:58682/home"
    }
  ]
}

I went through some CORS blogs but couldn't fix it. What exactly is going wrong?

score 1 · Accepted Answer · answered Jun 14 '17 at 12:15

1

Try again using this plugin in your browser.

It allows to you request any site with ajax from any source, no matter http/https discrepancies and the like. Practically adds the Allow-Control-Allow-Origin: * header in the response.

Please keep in mind that this is a band-aid solution. Your server response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.

answered Jun 14 '17 at 12:15

maninak

2,633
2
18
33

Thanks but cannot i manually add it to my code rather than depending on the browser extension? – priyank bhardwaj Jun 14 '17 at 12:49
Please read my whole answer: Please keep in mind that this is a band-aid solution. Your server response has to actually have the `'Access-Control-Allow-Origin': '*'` header, preferably with a more specific value than `*`. – maninak Jun 14 '17 at 13:06
The actual server you are referencing needs to be edited to have this header in the responses it gives. – maninak Jun 14 '17 at 13:08
so i have to configure server side is it?..In my web api? – priyank bhardwaj Jun 15 '17 at 07:37
Yes, exactly. That or enable Https, or both. – maninak Jun 15 '17 at 08:40

Getting Error " No 'Access-Control-Allow-Origin' header is present on the requested resource." in ionic2

1 Answers1

Linked