[Ionic 4] Cross-origin resource sharing (CORS) error triggered

Ionic Framework
1

Hi, I want to build an ionic 4 with request a website,
I disable CORS on chrome on ionic serve, but once deployed on the device (android 7) CORS error is thrown…

for example, once I try to http get google.com => CORS triggered
These didn’t happen on my Ionic 3 apps, but happen on ionic 4.

I used on my ionic 3 app, but with a newly created ionic 4 app CORS seems to be forbidden. is there a clue to make it work?

Ionic Info

Ionic:

   ionic (Ionic CLI)  : 4.0.3 (C:\Users\toto\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

error on logcat (android 7) :

SystemWebChromeClient: http://localhost:8080/: Line 0 : Failed to load https://www.google.com/?gws_rd=ssl: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

chromium: [INFO:CONSOLE(0)] "Failed to load https://www.google.com/?gws_rd=ssl: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.", source: http://localhost:8080/ (0)

Related Code

export class HomePage {

    public data: string;

    constructor(public http: HttpClient) {

        this.http.get('https://www.google.com/?gws_rd=ssl', { responseType: 'text' }).subscribe(
            (res: string) => this.data = res,
            error => this.data = JSON.stringify(error, null, 4))
    }

}
2 Likes
2

Having the same issue apparently all requests are throwing CORS errors. Any solution on this?

3

As written here :

If it is not an possibility to implement or configure CORS in the server, there is a native plugin that can “proxy” the HTTP requests using native code, so CORS can be completely bypassed:

Read more here: cordova-plugin-http.

So the workaround is to use HTTP native (cordova) instead of HTTP from httpClient (angular)

  • npm i @ionic-native/http@beta --save
  • npm i @ionic-native/core@beta --save
  • import { HTTP } from ‘@ionic-native/http/ngx’; (inside your service + app.module)
  • constructor(private httpNative: HTTP) { }
  • this.httpNative.get(url, {}, {}).then(data => { … });
4

But the angular http interceptors wont work with the native solution… Right ? Is there a better way to handle authorization headers, because i was using angular http interceptor for headers and some ore stuff. Also if we are using only native http plugin then we cant use debugger as well. And Ionic Serve will also not work, becuase we dont have cordova there… :open_mouth: its too bad with Ionic 4, introducing many big big breaking changes, i band my head almost everyday now for trying out Ionic 4.

5

hello,

maybe one of the chrome extension for cors issues helps liike https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

Best regards, anna-liebt

6

I have the same problem, but its being caused by a library (Mazemap) for which I cannot control how they issue their api calls.

7

But cordova-plugin-http plugin is native. So, it will not work with ‘ionic serve’ command.
Any solution for that?

8

This sucks sideways that it (http native) doesn’t work in Chrome. I also tried angular HttpClient, but then I get CORS error and the Chrome CORS -plugin doesn’t help either (works in Ionic 3) and I do not have access to the API to disable the cors issue at backend. This issue is really annoying. Debugging is way more difficult when you have to run on device.

9

When you say it won’t work with ‘ionic serve’, do you mean on chrome? Thanks.

10

yes
// 20 character limit blabla

11

Solved :100: :ok_hand:

Edit your ► ’ network security_config.xml ’
Add line ► Domain.com OR your IP(12.34.456.78)
after change it will look like this


<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
           <domain includeSubdomains="true">Domain.com OR your IP(12.34.456.78)</domain>
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>