javascript - 为什么服务器在 POST 方法请求后以 GET 响应？

Question

我陷入了困境:

TL;DR = 我通过 POST 请求发送数据，但服务器响应我正在执行 GET 请求

我正在使用 Laravel 和 Angular 1.5。基本上，我认为有这样的事情。

这是我的观点:

<form name="formCrossedRelation" novalidate role="form"
ng-submit="createCrossedRelation(delivery_carrier_status)">

<div class="row">
    <div class="col-md-12">
        <div class="form-group"
            ng-class="{'has-error' :  formCrossedRelation.configuration.$invalid && formCrossedRelation.configuration.$error.required && (formCrossedRelation.configuration.$dirty || formCrossedRelation.$submitted) , 'has-success' : formCrossedRelation.configuration.$valid || formCrossedRelation.$submitted  }">
            <label for="">Carrier&nbsp;<small class="text-danger font-noraml ">(*)</small></label>
            <select
                ng-model="delivery_carrier_status.delivery_carrier_status.carrier_id"
                required class="form-control" name="carrier"
                ng-options="item as item.name for item in carriers track by item.id"
                ng-change="getExternalStatuses(delivery_carrier_status.delivery_carrier_status.carrier_id)">
            </select>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <div class="form-group"
            ng-class="{'has-error' :  formCrossedRelation.configuration.$invalid && formCrossedRelation.configuration.$error.required && (formCrossedRelation.configuration.$dirty || formCrossedRelation.$submitted) , 'has-success' : formCrossedRelation.configuration.$valid || formCrossedRelation.$submitted  }">
            <label for="">Estado Carrier&nbsp;<small
                class="text-danger font-noraml ">(*)</small></label> <select
                ng-model="delivery_carrier_status.delivery_carrier_status.id"
                required class="form-control" name="externalStatuses"
                ng-options="item as item.code for item in externalStatuses track by item.id">
            </select>
        </div>
    </div>

    <div class="col-md-2"></div>


    <div class="col-md-5">
        <div class="form-group"
            ng-class="{'has-error' :  formCrossedRelation.configuration.$invalid && formCrossedRelation.configuration.$error.required && (formCrossedRelation.configuration.$dirty || formCrossedRelation.$submitted) , 'has-success' : formCrossedRelation.configuration.$valid || formCrossedRelation.$submitted  }">
            <label for="">Estado EasyPoint&nbsp;<small
                class="text-danger font-noraml ">(*)</small></label> <select
                ng-model="delivery_carrier_status.delivery_status.id" required
                class="form-control" name="EPstatus"
                ng-options="item as item.name for item in delivery_statuses track by item.id">

            </select>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="form-group"
            ng-class="{'has-error' :  formPudo.full_address.$invalid && formPudo.full_address.$error.required && (formPudo.full_address.$dirty || formPudo.$submitted) , 'has-success' : formPudo.full_address.$valid || formPudo.$submitted  }">
            <label for="">Operador 1&nbsp;<small
                class="text-danger font-noraml ">(*)</small></label> <input
                class="form-control" name="full_address" type="text"
                ng-model="delivery_carrier_status.json_aditional[1]" />
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group"
            ng-class="{'has-error' :  formCrossedRelation.configuration.$invalid && formCrossedRelation.configuration.$error.required && (formCrossedRelation.configuration.$dirty || formCrossedRelation.$submitted) , 'has-success' : formCrossedRelation.configuration.$valid || formCrossedRelation.$submitted  }">
            <label for="">Operación&nbsp;<small class="text-danger font-noraml ">(*)</small></label>
            <select ng-model="delivery_carrier_status.json_aditional.operator"
                class="form-control" name="operation"
                ng-options="item for item in operations track by item.id">
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group"
            ng-class="{'has-error' :  formPudo.full_address.$invalid && formPudo.full_address.$error.required && (formPudo.full_address.$dirty || formPudo.$submitted) , 'has-success' : formPudo.full_address.$valid || formPudo.$submitted  }">
            <label for="">Operador 2&nbsp;<small
                class="text-danger font-noraml ">(*)</small></label> <input
                class="form-control" name="full_address" type="text"
                ng-model="delivery_carrier_status.json_aditional[2]" />
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <button class="btn btn-orange pull-right" ladda="loading.btnCreate"
            data-style="zoom-in" type="submit">Crear relación</button>
    </div>
</div>

这是我在 Angular 中的 Controller

$scope.createCrossedRelation = function(delivery_carrier_status) {
    $scope.loading.btnCreate = true;
    if (this.formCrossedRelation.$valid) {
        delivery_carrier_status.json_aditional = JSON.stringify(delivery_carrier_status.json_aditional); 
        TrackingService.createCrossedRelation(delivery_carrier_status).then(function successCallback(response) {
            if (response.status == 201) {
                $scope.delivery_carrier_statuses.unshift(response.data.status);
                delivery_carrier_status = {};
                $scope.modalcreateCrossedRelation = false;
                $scope.loading.btnCreate = false;

                Notification.success({
                    title : "¡Felicitaciones!",
                    message : "Correlación creada.",
                    template : "custom_template.html"
                });
            }
        }, function errorCallback(response) {

            $scope.loading.btnCreate = false;
            if (response.status == 400) {
                for (var i = 0; i < response.data.length; i++) {
                    Notification.error({
                        title : "¡Oops!",
                        message : response.data[i],
                        template : "custom_template.html"
                    });
                }
            }
        });
        this.formCrossedRelation.$setPristine();
    } else {
        $scope.loading.btnCreate = false;
        Notification.error({
            title : "¡Oops!",
            message : 'No has completado todos los datos obligatorios del formulario.',
            template : "custom_template.html"
        });
    }
};

这是我的 TrackingService 文件

createCrossedRelation : function(delivery_carrier_status) {
        var req = {
            method : 'POST',
            url : '/api/statusconversion/',
            dataType : 'json',
            headers : {
                'Content-Type' : 'application/json',
                'X-Requested-With' : 'XMLHttpRequest'
            },
            data : delivery_carrier_status
        }
        return $http(req);
    },

此时，当我调试时，在 req 变量中，我得到了这个

As you can see, I'm doing a POST request

但是一旦后端响应，就会出现 405 状态:Method not allowed

这是routes.php文件

        Route::post('api/statusconversion/', 'TrackingController@createDeliveryStatusCarrierStatus');

我不知道为什么我被困住了。如果有人可以帮忙请。

Answer 1

API 网址拼写错误。多了一个“/”

之前:

createCrossedRelation : function(delivery_carrier_status) {
    var req = {
        method : 'POST',
        url : '/api/statusconversion/',
        dataType : 'json',
        headers : {
            'Content-Type' : 'application/json',
            'X-Requested-With' : 'XMLHttpRequest'
        },
        data : delivery_carrier_status
    }
    return $http(req);
},

之后:

createCrossedRelation : function(delivery_carrier_status) {
    var req = {
        method : 'POST',
        url : '/api/statusconversion', // Without the "/"
        dataType : 'json',
        headers : {
            'Content-Type' : 'application/json',
            'X-Requested-With' : 'XMLHttpRequest'
        },
        data : delivery_carrier_status
    }
    return $http(req);
},