How to solve CORS error while fetching an external API?

Question

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?

Answer 1

What is CORS?

Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. From wiki

In simple terms only an internal webserver can send Requests which are potentially dangerous to it's web server, and requests from other server's are simply blocked.

But few HTTP requests are allowed,Few of the allowed methods are GET, HEAD, POST.

How do I resolve the issue?

Apparently in this circumstance you cannot send a fetch request to a web server having CORS header. Instead you can do a GET request to the web server as a web server having CORS allows HTTP GET requests.

Note - If you send a GET request to a web server using angular in your browser it wouldn't work as browser's convert GET requests into fetch requests and fetch requests aren't allowed from a web server with CORS. Instead send a GET request from a webserver/local machine rather than a browser.

Answer 2

Create your own server and make a route which fetches that API. From your Angular application fetch that route on your server.

Answer 3

You have to use a package as a middleware. If you are using nodejs-framework expressjs.At first, you have to run npm install cors -force .Then add the code that is given bellow:-

const cors=require('cors')

app.use(cors({origin:true}))