了解 Angular2 中外部服务的 CORS 处理

Question

我遇到了一种情况，我试图从外部 URL ('http://knowstack.com/webtech/charts_demo/data.json') 获取数据

如果是 Angular2，我会收到 CORS 错误。据我了解，CORS 需要在服务端启用，而不是在 Angular2 应用程序中启用。

但我没有访问服务端。因此，这是无法做到的。

现在，如果我将前端从 Angular2 更改为 ASP.NET MVC 核心 UI 并使用 System.Net.Http 命名空间的 httpClient 类。我确实收到了回复和数据。

我想知道这在 ASP.NET MVC 核心 UI 中是如何工作的，而 Angular2 前端给了我 CORS 错误。 如何在Angular2中克服这种外部服务CORS场景？

以下是我的两个案例以及代码-

案例 1：Angular2

在此，我使用 Angular2 版本 RC4 和 npm 版本 3.9.6，节点版本 4.4.7。浏览器chrome，编辑器：VScode

要执行应用程序，我只是使用“npm start”命令。

        this._http.get('http://knowstack.com/webtech/charts_demo/data.json')
                .map(this.extractData)
                .subscribe((response) => {
                    this.options11 = {
                                    title : { text : 'knowstack' },
                                    series : [{
                                        name : 'knowstack',
                                        data : response.json()
                                    }]
                                };
                },
                (error) => { 
                    this.errorMessage = <any>error
                });

浏览器控制台出错：

案例 2：ASP.NET MVC core 1.0，浏览器 chrome，IDE：VS 社区 2015

    public IActionResult Index()
    {
           string GET_DATA_URL = "http://knowstack.com/webtech/charts_demo/data.json";

            HttpClient client1 = new HttpClient();
            client1.BaseAddress = new Uri(GET_DATA_URL);

            client1.DefaultRequestHeaders.Accept.Clear();
            client1.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

            HttpResponseMessage response1 = client1.GetAsync(GET_DATA_URL).Result;

            if (response1.IsSuccessStatusCode)
            {
                var dataObjects = response1.Content.ReadAsStringAsync().Result;

                var rootObj = JsonConvert.DeserializeObject<dynamic>(dataObjects);

            }
            else
            {
                // handle failure response
            }
        return View();
    }

如果您需要我方面的任何信息，请告诉我。

Answer 1

我猜 ASP.NET 代码在您的服务器上执行，然后服务器将 HTML 返回给您。

CORS 是一种内置于浏览器的技术。浏览器阻止网站对不允许从外部访问的外部网站进行 AJAX 调用。因为在 ASP.NET 的情况下，此请求是由您的后端完成的。因为对于后端，这是一个普通的 HTTP 请求（就像您使用浏览器所做的那样），它不需要检查 CORS。因此，请求也不会发送“origin”标头。 CORS 仅用于防止来自外部主机的 AJAX 调用。

要在 Angular2 中实现这项工作，您可以做的是在您的域上创建一个代理，该代理只是绕过对外部服务的请求，并且就像请求发生在您的站点上一样，因此不需要 CORS。