I am currently developing an Angular application that utilizes ng-resource. The backend service API is created using Asp.Net Core web api and CORS has been enabled.
Here is the code snippet for service.js:
.factory('D2Service', ['$resource', function ($resource) {
return $resource('http://localHost:5001/api/D2/:id',
{ id: '@id' },
{
update: { method: 'PUT' }
});
}])
Despite this, when making the call D2Service.update(model.d);
in the controller, I encountered the following error:
XMLHttpRequest cannot load http://localhost:5001/api/D2. 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:8082' is therefore not allowed access.
Strangely,
D2Service.get({ id: model.id })....
executes without any issues. Why does the 'PUT' method encounter a CORS problem while the 'GET' method works fine?
Below are the details of the request/response as monitored using Fiddler.
Request:
OPTIONS http://localhost:5001/api/D2 HTTP/1.1
Host: localhost:5001
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:8082
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:8082/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8
Response:
HTTP/1.1 204 No Content
Date: Sun, 27 Nov 2016 23:32:31 GMT
Server: Kestrel