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 li

Answer 1

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

Answer 2

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 3

My CORS issue got FIXED when I updated Android System Webview from the play store. I tried Cordova-Advance-HTTP Plugin but my PUT Request was not working with Cordova-Advance-HTTP plugin.

After Updating Android System Webview I used HTTP Client plugin which I was using before. Updating Android System Webview helped me in CORS issue

Answer 4

---

```
export function getAuthHttp(http: Http, options: RequestOptions) {
  console.log("token",storage.get('id_token'));
  return new AuthHttp(new AuthConfig({
          headerName: 'Authorization',
          headerPrefix: 'bearer',          
          tokenName: 'id_token',
          tokenGetter: (() => storage.get('id_token')),
          noJwtError: true,    
          //globalHeaders: [{'Accept': 'application/json'}],
          globalHeaders: [{'Content-Type':'application/json'},{"Access-Control-Allow-Origin": "*"}],
         
        }), http, options);
}
```

---

Answer 5

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 6

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