AngularJS $http.POST method 405 error

Question

In $http.post method I'm getting 405 issue. We are using single service(REST) for both POST & GET methods.

if url having localhost it is working. urlAddScenario is localhost/Service.svc/api/scenarios/add. If I'm using machine name instead of locahost it is not working. machinname/Service.svc/api/scenarios/add

My JS code is

 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);

config:

   <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'm seeing OPTIONS instead of POST in 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

Error:

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

Response Headers: HTTP/1.1 405 Method Not Allowed

Check the answer to this question http://stackoverflow.com/questions/17528634/ajax-post-works-vs-angularjs-http-does-not-work-w-asp-net-mvc-4 — hknust, Dec 09 '14 at 19:45

score 6 · Answer 1 · edited May 23 '17 at 11:52

6

In order to enable CORS via web.config properly 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 PUT and DELETE verbs you also need to handle the preflight check. You can read more about CORS and preflight check in this answer: https://stackoverflow.com/a/27374066/4304188

edited May 23 '17 at 11:52

Community

1
1

answered Dec 09 '14 at 19:48

Mihai Dinculescu

18,663
8
48
66

What's your definition for ScenarioRequestParams? My guess is that you're construction your post request in the wrong manner. – Mihai Dinculescu Dec 09 '14 at 20:34
Are you truly using WeB API, because you have posted code from an ASMX web service. – Mihai Dinculescu Dec 09 '14 at 20:36
param is "ScenarioId": 10, it is not issue with request param. I've tested POST scenario in fiddler it is working good. Some how it is not working from application. – user3194721 Dec 09 '14 at 20:38
Are you configuring CORS via configuration as well? If not you should remove that. Other than that your Web API looks like. The problem should be in your firewall. – Mihai Dinculescu Dec 09 '14 at 20:47
That web.config section I posted should be enough. – Mihai Dinculescu Dec 09 '14 at 20:50
Do you mean this setting. Already added. – user3194721 Dec 09 '14 at 20:52
Yes I added – user3194721 Dec 09 '14 at 20:54

score 1 · Answer 2 · answered Mar 20 '15 at 21:54

Solution:

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

I was also facing this issue. Was getting 405 and OPTIONS was made. I came across a blog and found that the way angular encodes param is not understood by web server properly. So, jQuery is required to encode POST data

score 0 · Answer 3 · answered Jan 11 '17 at 21:50

0

Mistake on my part, I simply 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">

answered Jan 11 '17 at 21:50

Robot70

560
6
10

AngularJS $http.POST method 405 error

3 Answers3

Linked