No 'Access-Control-Allow-Origin' header in Angular 2 app
<p>For this project, I'm just learning and practicing Angular 2. I have no server-side and am making API requests to 
<a href="http://www.barchartondemand.com/api.php">barchart ondemand api</a> .</p>

<p>I'm wondering if it is possible to bypass the cors issue. I'm still fairly new to all this, so baby-step instructions are really appreciated! I'm using <code>http://localhost:8080</code>.</p>

<p>Error message: (api key commented out) </p>

<p><code>XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;symbol=GOOG&amp;type=daily&amp;startDate=20150311000000. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.</code></p>

<p>StockInformationService:</p>

<pre><code>import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class StockInformationService {
    private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;";

    constructor (private _http: Http) {}

    getData(symbol: string): Observable&lt;any&gt; {
        // Tried adding headers with no luck
        const headers = new Headers();
        headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Access-Control-Allow-Methods', 'GET');
        headers.append('Access-Control-Allow-Origin', '*');

        return this._http.get(this.apiRoot + "symbol=" + symbol + "&amp;type=daily&amp;startDate=20150311000000", {headers: headers})
            .map(response =&gt; response.json());
    }
}
</code></pre>

<p>App Component:</p>

<pre><code>import {Component} from "angular2/core";
import {VolumeComponent} from '../../components/volume/volume';
import {StockInformationService} from '../../core/stock-information.service';

@Component({
    selector: 'app-shell',
    template: require('./app-shell.html'),
    directives: [VolumeComponent],
    providers: [StockInformationService]
})
export class AppShell {
    constructor(private _stockInformationService: StockInformationService) {}

    // In my template, on button click, make api request
    requestData(symbol: string) {
        this._stockInformationService.getData(symbol)
            .subscribe(
                data =&gt; {
                    console.log(data)
                },
                error =&gt; console.log("Error: " + error)
            )}
    }

}
</code></pre>

<p>In my console, the requestData Error:
<code>Error: [object Object]</code></p>