Can't issue http requests


I’m building a PWA and I’m trying to get information from a really simple server side that I’m building with ASP.NET.

I’ve built a service (injectable class) with the following method that should do a simple http get request to retrieve settings information from the server:

getSettings() {
    var url = this._settings.ApiUrl + '/api/values';

    let headers: Headers = new Headers({
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT',
      'Content-Type': 'application/json; charset=UTF-8',
      'Accept': 'application/json'

    return this._http
      .get(url, {headers: headers})
      .map((response: Response) => <RemoteConfiguration>response.json());

If I do a console.log(url) I’m getting the correct url for my server. And if I put this address in my browser/postman I’m getting the result I’m expecting.

The problem is that when the app is running the get request in the console I’m getting the following error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Failed to load http://localhost:51421/MyApp/api/values: 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:8100' is therefore not allowed access. The response had HTTP status code 404.

As you can see from the above code, I have put the headers because I read about the cross-origin issues. In my server side I also enabled cross-origin and I’ve installed the CORS plugin for chrome recommended in posts in this forum.

But I cannot seem to be able to make the request. What am I missing?