Understanding CORS handling for external service in Angular2
<p>I came across one scenario where I am trying to fetch data from external URL ('<a href="http://knowstack.com/webtech/charts_demo/data.json" rel="nofollow noreferrer">http://knowstack.com/webtech/charts_demo/data.json</a>')</p>

<p>In case of Angular2, I am getting CORS error. As per my understanding, CORS need to enable on service side and not in Angular2 application.</p>

<p>But I do not have access service side. Hence, this can’t be done.</p>

<p>Now, if I change my front end from Angular2 to ASP.NET MVC core UI and use httpClient class of System.Net.Http namespace. I do get a response and data back.</p>

<p>I am wondering how this is working in ASP.NET MVC core UI and Angular2 front-end gives me CORS error. <strong>How to overcome this external service CORS scenario in Angular2?</strong> </p>

<p>Below are my 2 cases along with code-</p>

<blockquote>
  <p><strong>Case 1: Angular2</strong></p>
</blockquote>

<p>In this, I am using Angular2 version RC4 with npm version 3.9.6, node version 4.4.7. Browser chrome, Editor: VScode</p>

<p>To execute application, I am simply using ‘npm start’ command.</p>

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

<p><strong>Error in browser console:</strong></p>

<p><a href="https://i.stack.imgur.com/CD4dU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CD4dU.png" alt="Error"></a></p>

<blockquote>
  <p><strong>Case 2: ASP.NET MVC core 1.0, Browser chrome, IDE: VS community 2015</strong></p>
</blockquote>

<pre><code>    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&lt;dynamic&gt;(dataObjects);

            }
            else
            {
                // handle failure response
            }
        return View();
    }
</code></pre>

<p>Please let me know if you need any information from my side.</p>