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

【问题标题】：Angular.js Form POST Returns Error 405 Method Not AllowedAngular.js 表单 POST 返回错误 405 方法不允许
【发布时间】：2016-08-04 13:53:24
【问题描述】：

我在尝试提交表单时不断收到 405 错误。这是我的控制器：

'使用严格';

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

这是我的观点：

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

是否有其他文件或需要修改的内容才能让这种情况发生？我错过了什么？

【问题讨论】：

您确定该网址有效吗？即url : '/leads'。这是一个api调用吗？
/leads 将在本地处理表单数据

标签： javascript angularjs

【解决方案1】：

服务器告诉您特定方法（GET、POST、PUT、PATCH、DELETE 等）无法被服务器接受。这很可能是因为您的 API 路由/端点没有配置 POST 方法。

例如，在 ExpressJS 中，您需要通过执行以下操作来配置接受 POST 的路由：

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

有关405 Method Not Allowed 错误的更多信息，click here。

【讨论】：

我认为它是这样的。我只是不确定您将如何配置路由以接受带有 Angular 的 POST。
您已经在您的$http 请求中发送了一个 POST。问题不在于角度，而在于您的 API。您的 API 是用哪种语言或框架编写的？
这可能是真正的问题，我还没有设置表单处理程序。
@Dubster 那么您可能应该将此问题标记为正确。如果这是错误的，您可以随时取消标记并发布您自己的答案。

【解决方案2】：

几周前我遇到了类似的问题。事实证明，服务器只接受标头中特定类型的'Content-Type'。

但是将Content-Type 更改为 application/json 解决了这个问题：

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

附言我并不是说这一定会解决您的问题，但这是与此类问题相关的解决方案。只需找出您的服务器期望的输入类型。

编辑

我并不是说将'application/json' 发送为Content-Type。我的意思是找出可接受的内容类型并发送该类型的标头。

【讨论】：

这将返回与405 Method Not Allowed 不同的错误。也许你在想406 Not Acceptable？
我并不是说将'application/json' 发送为Content-Type。我要说的是找出可接受的内容类型并发送该类型的标头。
内容类型是什么无关紧要；如果内容类型不被接受，则会给出 406 错误，而不是 405。
是的，我试过了，但仍然出现 405 错误。

【解决方案3】：

你尝试让后端工程师实现 OPTIONS 方法。

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

【讨论】：