Angular.js表单POST返回错误405方法不允许

Question

I keep getting a 405 error when trying to submit my form. Here's my controller:

'use strict';

angular.
    module('myApp').
    component('zipPopup', {
        templateUrl: 'zip-popup/zip-popup.template.html',
        controller: function ZipPopupController($scope, $http) {
            $scope.show = true;
            $scope.hide = function(){
                $scope.show = false;
            };
            $scope.user = {};
            $scope.regex = '\\d{5}';

            $scope.submitForm = function(isValid) {
                if(isValid) {
                    $http({
                        method  : 'POST',
                        url     : '/leads',
                        data    : $scope.user,
                        headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
                    })
                    .success(function(response) {
                        $scope.show = false;
                    })
                    .error(function(response) {
                        console.log(response);
                    });
                }
            };
        }
    });

Heres my view:

<div class="zip-popup text-center">
    <div class="popup-container">
        <form name="zipForm" class="zip-form" ng-submit="submitForm(zipForm.$valid)" novalidate>
            <input ng-model="user.zipCode" ng-pattern="regex" name="zipCode" class="form-control text-center" placeholder="Your Zip" required />
            <p class="error" ng-show="zipForm.zipCode.$invalid && !zipForm.zipCode.$pristine">A 5 digit zip code is required.</p>
            <button type="submit" class="btn btn-block" ng-disabled="zipForm.$invalid">Submit</button>
        </form>
    </div>
</div>

Is there a different file or something that I need to modify to allow this to happen? What am I missing?

Answer 1

The server is telling you that the particular method ( GET , POST , PUT , PATCH , DELETE , etc.) can't be accepted by the server. This is most likely due to the fact that your API route/endpoint doesn't have a POST method configured.

For example, in ExpressJS you'd need to configure a route that accepts POST by doing the following:

app.post('/leads', function (req, res) {
  res.send('POST request to the homepage');
});

For more information on the 405 Method Not Allowed error, click here .

Answer 2

I had a similar issue a couple of weeks ago. It turns out that the server was only accepting 'Content-Type' of a particular type in the headers.

However changing the Content-Type to application/json solved the issue:

$http({
    method  : 'POST',
    url     : '/leads',
    data    : $scope.user,
    headers : {'Content-Type': 'application/json'} 
})
.success(function(response) {
    $scope.show = false;
})
.error(function(response) {
    console.log(response);
});

PS I'm not saying this will necessarily solve your issue, but this is a solution related to this type of problem. Just find out what kind of input your server is expecting.

---

EDIT

I'm not saying to send 'application/json' as the Content-Type . All I'm saying is that Find what type of content is acceptable and send that type of header.

Answer 3

you try to let the back-end engineer to implement the OPTIONS method.

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#Preflight_example