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?