Angular problem requesting public API from localhost:4200

Question

I am trying to fetch JSON data from a public API: https://www.gov.uk/api/content/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19

But the application screams at with with CORS issue.

I am not sure if there is anything I can do to fix the problem.

My Error message

Access to XMLHttpRequest at 'https://www.gov.uk/api/content/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My Function

    getLocalAreaNews(): Observable<any> {
        const url     = this.ApiUrl + '/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19';
        const headers = new HttpHeaders()
            .set('Access-Control-Allow-Origin', '*');

        console.log(url);

        return this.http.get<any>(url, {
           headers: headers
        });

    }


    ngOnInit(): void {
        this.GovApi.getLocalAreaNews().subscribe((data) => {
            console.log(data);
        });
    }

Please do some research into [what CORS is and how it works](https://stackoverflow.com/q/10636611/215552), and search for the error message. There are literally hundreds of questions about this on Stack Overflow. — Heretic Monkey, Aug 26 '20 at 17:46

Dalorzo · Accepted Answer · 2020-08-26T18:09:00.603

1

All you have to do is prefix your URL with:

https://cors-anywhere.herokuapp.com/

like:

const url     = "https://cors-anywhere.herokuapp.com/"
+ this.ApiUrl + "/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19

Here is a demo of it working:

Online Demo

I know your code is angular but for the sake of the example the principle is the same

$.ajax({ type: "GET", url: "https://cors-anywhere.herokuapp.com/https://www.gov.uk/api/content/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19", contentType: 'application/json', dataType: 'json' }).done(function (result) {
            console.log(result);
 }).fail(function (err) {
     console.log("Error =>", err);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Aug 26 '20 at 18:09

answered Aug 26 '20 at 17:52

Dalorzo

19,834
7
55
102

Nice that did work ! Thanks @Dalarzo Any idea how to handle this when app will get deployed into production or is this issue only occurs on the local env ? – NashPL Aug 26 '20 at 18:21
1

CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request hosted in herokuapp. The issue is about headers, most likely you will have the issue in PROD as well – Dalorzo Aug 26 '20 at 18:21
You may want to try this: https://medium.com/better-programming/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8c4d – Dalorzo Aug 26 '20 at 18:27
This url is meant to be a demo, you should really self host it per their docs: https://github.com/Rob--W/cors-anywhere. Demo server A public demo of CORS Anywhere is available at https://cors-anywhere.herokuapp.com. This server is only provided so that you can easily and quickly try out CORS Anywhere. To ensure that the service stays available to everyone, the number of requests per period is limited, except for requests from some explicitly whitelisted origins. If you expect lots of traffic, please host your own instance of CORS Anywhere... – cjd82187 Aug 26 '20 at 20:50

Angular problem requesting public API from localhost:4200

1 Answers1