Angular: Error de cours con wiki api. How to fix XMLHttpRequest error?

Question

I am trying to get information with the wikipedia api but I get a cours error and I have not been able to fix it.

I am getting the following errors:

Access to XMLHttpRequest at 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Santiago%20Chile' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

"Http failure response for https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Santiago%20Chile: 0 Unknown Error"

I was looking for information in the wikipedia documentation itself and it says this about cours

When accessing the API using a cross-domain AJAX request (CORS), set this to the originating domain. This must be included in any pre-flight request, and therefore must be part of the request URI (not the POST body).

For authenticated requests, this must match one of the origins in the Origin header exactly, so it has to be set to something like https://en.wikipedia.org or https://meta.wikimedia.org. If this parameter does not match the Origin header, a 403 response will be returned. If this parameter matches the Origin header and the origin is whitelisted, the Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers will be set.

For non-authenticated requests, specify the value *. This will cause the Access-Control-Allow-Origin header to be set, but Access-Control-Allow-Credentials will be false and all user-specific data will be restricted.

I attach the page where the information can be found:

https://en.wikipedia.org/w/api.php?action=help&modules=main

I attach my code. The error occurs in the getDataAPISandbox() method.

[wikipedia service][1]

import {  HttpClient, HttpHeaders, HttpParams, HttpResponse  } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WikipediaService {

  apiKey: string = 'e30a2b750f27f2feedff6f126820c44a';
  URI: string = '';
  URIWIPI: string = '';

  constructor(private http: HttpClient, private HttpClientModule: HttpClientModule) {
    this.URI = `https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&generator=search&gsrnamespace=0&gsrlimit=5&gsrsearch='New_England_Patriots`;
    this.URIWIPI = `https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro&explaintext&redirects=1&titles=Santiago%20Chile`;
    //api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
    //https://api.openweathermap.org/data/2.5/weather?appid=${this.apiKey}&units=metric&q=`
  }

  getDataWiki() {
    return this.http.get(this.URI);
  }

  getDataAPISandbox(){
    return this.http.get(this.URIWIPI);
  }
}


how do I get the result in the component:

this.wikipedi.getDataAPISandbox().subscribe(resultado => {
          console.log(resultado);
        },
          err => {
            console.log(err);
        });

question from:https://stackoverflow.com/questions/65940347/angular-error-de-cours-con-wiki-api-how-to-fix-xmlhttprequest-error

Answer 1

Waitting for answers