Calling 3rd party API cause CORS error #11378

SASIMEXICO created 2 years ago

Hi ZERO,

I'm trying to add a openweathermap API call into my project, then always return CORS error.

Service Proxy

export class WeatherServiceProxy { private httpClient: HttpClient;

constructor(@Inject(HttpClient) httpClient: HttpClient) {
    this.httpClient = httpClient;
}

getCurrentWeather(lat: string, lon: string, apiKey) {
    let url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=metric&APPID=' + apiKey;
    return this.httpClient.get(url);
}

}

Component Call

    this.weatherService.getCurrentWeather('41.69059766384649', '2.4914624650715758', this.openWeatherMapAPIKey)
        .subscribe(res => {
            console.log('getCurrentWeather', res);
            this.currentWeather = res;
        }, err => {
        }, () => {
            console.log('error');
        })

The call always crash for CORS

Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?lat=41.69059766384649&lon=2.4914624650715758&units=metric&APPID=66c99a512af822a19700e0fb026aad4b' from origin 'https://gensam.dev.sasi.com.es' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

GET https://api.openweathermap.org/data/2.5/weather?lat=41.69059766384649&lon=2.4914624650715758&units=metric&APPID=66c99a512af822a19700e0fb026aad4b net::ERR_FAILED

I tried same ServiceProxy and same component into other project .NET6 + Angular NOT ZERO, then the call to openweathermap API runs perfect, already in localhost. Maybe the ZERO solution need to implement something to resolve this CORS issue? Any additional config?

In the same way, I can't use power-bi angular module for the same reason... always CORS error/issue.

Need help and solution for this issue. Thanks!

3 Answer(s)