openweathermap with Ionic 4 gives Access-Control-Allow-Origin' header in the response must

manpreet Best Answer 2 years ago

I have tried to use Openweathermap. But it gives below error. I saw this is working fine with ionic serve number of articles. But why it is not working for me?

service.ts

get(): Observable<any> {
    const headerDict = {
      "Content-Type": "application/json"
    };

    const headerObj = { headers: new HttpHeaders(headerDict) };
    return this.http.get("https://api.openweathermap.org/data/2.5/weather?lat=-53.15&lon=-70.92&APPID=3e721e227b5c28d8ff5691e4fff1c36e&units=metric", headerObj);
  }

page.ts

 init() {
     this.weatherService.get().subscribe((res: any) => {
      console.log(res);
    }, error => {
     }, () => {
    });
  }

Error:

OPTIONS https://api.openweathermap.org/data/2.5/weather?lat=-53.15&lon=-70.92&APPID=3e721e227b5c28d8ff5691e4fff1c36e&units=metric 405 (Method Not Allowed)

Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?lat=-53.15&lon=-70.92&APPID=3e721e227b5c28d8ff5691e4fff1c36e&units=metric' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.