CORS error on production build on device too

manpreet Best Answer 2 years ago

I have built the Ionic 4 app using this CLI:

ionic cordova build https://forum.tuteehub.com/tag/android">android --prod

service.ts

  get(): Observable<any> {
   return this.http.get("http://api.openweathermap.org/data/2.5/forecast?lat=52.974431&lon=70.2398363&https://forum.tuteehub.com/tag/app">appid=myapi&units=metric");
  }

Why it still give CORS error?

Access to XMLHttpRequest at 'http://api.openweathermap.org/data/2.5/forecast?lat=52.974431&lon=70.2398363&appid=myid&units=metric' from origin 'http://localhost:8100' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

As per my knowledge, it should run on the device without error no? Why it still shows http://localhost:8100 on the device? According to this doc it should work fine on the device no?

Note: I use chrome://inspect/#devices to get above error?

manpreet 2 years ago

Recently i got same problem but i resolve it by using cordova-plugin-advanced-http for android and ios device.

Install

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

Use

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });