AngularJS $ http.POST 405 method error

Question

I have a 405 problem in the $ http.post method. We use a single service (REST) ​​for the POST and GET methods.

if url has localhost, it works. urlAddScenario - localhost / Service.svc / api / scenarios / add. If I use the machine name instead of locahost, it does not work. machinname / Service.svc / api / scenarios / add

My js code

scenarioExecutionFactory.addScenario = function (scenarioId) { return $http.post(urlAddScenario, scenarioId) }; 

anotherJS:

  var runScenarioId = { "ScenarioId": 10 } scenarioExecutionFactory.addScenario(runScenarioId ) .success(function (data) { $scope.getScenarioRecentRuns($scope.CurrentScenario); }); 

WCF Service:

  [OperationContract] [WebInvoke(UriTemplate = "api/scenarios/add", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, Method = "POST")] Request AddScenario(ScenarioRequestParams requestParams); 

configurations:

  <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Credentials" value="true" /> <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,OPTIONS" /> <add name="Access-Control-Allow-Headers" value="Origin,Content-Type,Accept,Authorization,X-Ellucian-Media-Type" /> </customHeaders> </httpProtocol> 

I see OPTIONS instead of POST in the headers.

Headers:

 **OPTIONS** http://ddd/HelloService/HelloService.svc/PostData HTTP/1.1 Accept: */* Origin: http://localhost:31284 Access-Control-Request-Method: POST Access-Control-Request-Headers: accept, content-type Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko Host: vijayakatta Content-Length: 0 DNT: 1 Connection: Keep-Alive Pragma: no-cache 

Mistake:

IE: SCRIPT7002: XMLHttpRequest: network error 0x80070005, access is denied.

Chrome: XMLHttpRequest cannot load htp // machinename / services.svc / api / scenarios / add. Invalid HTTP Status Code 405

Answer header: HTTP / 1.1 405 Method not allowed

Answer 1

To enable CORS through web.config correctly, you need to specify these 3 custom headers

 <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> 

If you plan to support the verbs PUT and DELETE , you also need to handle the preflight check. You can learn more about CORS and preflight validation in this answer: fooobar.com/questions/820598 / ...

Answer 2

Decision:

 $http({ url: "", method: "POST", data: $.param({ data1: "" }), headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }); 

I also ran into this problem. It turned out 405, and OPTIONS were made. I stumbled upon a blog and found that the angular encodes param method is not understood properly by the web server. So jQuery is required to encode POST data

Answer 3

The error for my part, I just had to remove method="post" action=""

Bad: <form ng-submit="doSubmit()" name="myform" method="post" action="" role="form">

Good: <form ng-submit="doSubmit()" name="myform" role="form">