IONIC 3 CORS ISSUE

Question

I am having a CORS issue with Ionic 3 when attempting to make GET calls to an API. I am using Ionic local server, running ionic serve in the command line for live server.

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

I tried updating ionic.config.json with proxy setting but that does not seem to be working..

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games/"
    }
  ]
}

My Data Service

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class DataProvider {

  headers = new Headers({'user-key': '1234567890123'});
  options = new RequestOptions ({headers: this.headers}); 
  limit: number = 50;

  constructor(public http: Http) {
    console.log('Hello DataProvider Provider');
  }

  getGames(genre, offset_num) {

    let genre_id = genre;
    let offset = offset_num;

    return this.http.get('https://api-2445582011268.apicast.io/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)
  }

}

I am trying to make calls to this api

Request Url

https://api-2445582011268.apicast.io
HEADERS
Key Value
user-key    YOUR_KEY
Accept  application/json

Primary Question My calls are failing. How do I create proxy for this issue?

Answer 1

To fix this issue, please change the following lines

ionic.config.json

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games"
    }
  ]
}

You have to remove the " / " which is at the end of of "proxyUrl".

My Data Service

return this.http.get('/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)

In the http call, the url should begin with '/games'. '/games' because ionic will proxy http://localhost:<port>/games to https://api-2445582011268.apicast.io/games

Please use the above method for external GET and POST calls in your application.

Thank you.

Answer 2

If you wan to use for testing in Chrome just install chrome extension Allow control origin Quick and easy way

Answer 3

the proxy functionality expects that you're referencing the local server. in your GET request, you're still pointed at the remote API. If you change your code to this.http.get('/games/...' it should start to function as the request will go to http://localhost:8100/games..., which the "proxy" option will catch and pass on to the URL you've provided.

You may also only need to put https://api-2445582011268.apicast.io in the proxyUrl field. I think the rest of the path is passthrough.

Answer 4

To test in development environment, you can run Google Chrome in disable-web-security mode.

Steps to follow (On Windows)

• Press Windows Key + R to open Run window.
• Enter/input following command and press Enter key.

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Steps to follow (On Ubuntu)

• Kill all the chrome.exe instances before you run/execute it.

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

• Before Chrome 48

chromium-browser --disable-web-security

Steps to follow (On Mac)

• Run following command in terminal.

open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:8100/ --disable-web-security

Answer 5

You can handle the CORS when debugging in browser by using CORS extension or by disabling the security of Chrome. But you need to handle the CORS when you debug in app on the server side, I was consuming woo-commerce API ,so i edited it as follows->

1.Plugins->editor->woocomerceapi

right after

<?php**
header(“Access-Control-Allow-Origin: *”);   

2.Update File