How to solve CORS error while fetching an external API?

I'm developing a web app in Angular 10 that works as follows:



I'm dealing with CORS issue. I do not have permission to add code to the server I'm fetching.

I want to be able to:

1. Fetch the website
2. Parse the result, and put it in my database

I'm aiming to deploy the solution on an Apache server.

Here is the CORS error I'm dealing with:

Blocking a Cross-Origin Request: The "Same Origin" policy does not allow viewing the remote resource located at https://wwwfrance1.CENSORED.eu.com/api/?apikey=CENSORED.

Reason: "Access-Control-Allow-Origin" CORS header is missing. Status code: 200.
​

Here is what I've tried:

1. 
   Using MOSIF Mozilla extension (works, but not sustainable for deployment, and for some reason, when I'm ignoring the CORS security, I cannot post on my DB any more)
   
   
2. 
   Adding a header in my fetching request, such as:
   
   /******API SEACH****/
   /***Global Update***/
   private updateClients() {
   let xmlRequestPromise = fetch('https://wwwfrance1.CENSORED.eu.com/api/?apikey=CENSORED&service=list_clients', {
   method: 'GET',
   headers: {
   'Access-Control-Allow-Origin': '*',
   }
   })
   .then(async response => this.clients = this.regexSearchClient(await response.text()))
   return xmlRequestPromise
   }

But that doesn't work either. I've verified that the header appears in the request.

How to proceed?

Continue reading...