从 localhost:4200 请求公共 API 的角度问题

Question

我正在尝试从公共 API 获取 JSON 数据： https://www.gov.uk/api/content/government/collections/local-restrictions-areas-with-an-outbreak-of-coronavirus-covid-19

但应用程序因 CORS 问题而大喊大叫。

我不确定是否有什么办法可以解决这个问题。

我的错误信息

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.

我的功能

    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);
        });
    }

Answer 1

您所要做的就是在您的 URL 前面加上：

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

喜欢：

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

这是它的工作演示：

Online Demo

我知道你的代码是有角度的，但为了这个例子，原理是一样的

$.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>