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, and search for the error message. There are literally hundreds of questions about this on Stack Overflow. — Heretic Monkey
– Heretic Monkey, Commented Aug 26, 2020 at 17:46

Dalorzo · Accepted Answer · 2020-08-26 18:09:00Z

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, 2020 at 18:09

answered Aug 26, 2020 at 17:52

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NashPL Over a year ago

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 ?

Dalorzo Over a year ago

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 Over a year ago

You may want to try this: medium.com/better-programming/…

cjd82187 Over a year ago

This url is meant to be a demo, you should really self host it per their docs: github.com/Rob--W/cors-anywhere. Demo server A public demo of CORS Anywhere is available at 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...

Collectives™ on Stack Overflow

Angular problem requesting public API from localhost:4200

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related