AngularJS中使用JQuery Ajax发POST请求返回502状态码如何解决？

问题排查及解决方案 #

1 直接原因修复（现有jQuery Ajax写法调整） #

你现在的代码缺了processData: false配置，jQuery默认会对传入的data做表单格式序列化处理，你已经手动转成JSON字符串了，这个默认处理会破坏你的请求体格式，导致后端无法正确解析，这是大概率触发502的原因。
另外headers里的content-type建议写成标准首字母大写格式Content-Type，避免部分严格校验的服务端识别异常。

修复后的代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.data = {};
    $scope.reqCalling = function () {
        // 先打印确认提交的参数和你Postman的一致
        console.log("提交参数", $scope.data);
        let settings = {
            "async": true,
            "crossDomain": true,
            "url": "myUrl",
            "method": "POST",
            "headers": {
                "Content-Type": "application/json",
            },
            "processData": false, // 禁止jQuery自动处理请求体
            "data": JSON.stringify($scope.data),
        }
        $.ajax(settings).done(function (response) {
            console.log("Success",response);
            $scope.data = {};
            $scope.$apply()
            return false;
        }).fail(function (error) {
            console.log("Failed",error);
            // location.reload();
        });
    }
});

2 输入字段校验 #

确认你另外4个字段的ng-model拼写完全匹配接口要求的字段名，示例如下：

• 名输入框：<input type="text" ng-model="data.firstname" name="firstname">
• 姓输入框：<input type="text" ng-model="data.lastname" name="lastname">
• 手机号输入框：<input type="tel" ng-model="data.phone" name="phone">
• 回复内容输入框：<input type="text" ng-model="data.response" name="response">
  字段大小写、拼写必须和Postman里的请求体完全一致，后端如果做严格字段校验，拼写错误会导致请求失败。

3 更推荐的AngularJS原生写法（避免混用jQuery） #

AngularJS自带$http服务专门处理请求，不需要手动调用$apply更新视图，也不会出现jQuery的请求体处理冲突问题，写法如下：

var app = angular.module('myApp', []);
// 注入$http服务
app.controller('myCtrl', function ($scope, $http) {
    $scope.data = {};
    $scope.reqCalling = function () {
        console.log("提交参数", $scope.data);
        $http({
            method: 'POST',
            url: 'myUrl',
            headers: {
                'Content-Type': 'application/json'
            },
            data: $scope.data // $http会自动转成JSON字符串，不需要手动stringify
        }).then(function successCallback(response) {
            console.log("Success", response.data);
            $scope.data = {};
        }, function errorCallback(error) {
            console.log("Failed", error);
        });
    }
});

4 进一步排查手段 #

如果修改后还是报错，按以下步骤定位：

• 打开浏览器开发者工具（F12），切换到「网络」面板，触发请求
• 先看有没有OPTIONS类型的预检请求，如果有，确认该请求的返回状态是200/204，Postman不会发送CORS预检请求，浏览器会，如果预检请求失败也会返回502
• 查看实际POST请求的「请求载荷」，确认和Postman里的JSON结构完全一致
• 核对POST请求的请求头里的Content-Type是否为application/json

内容的提问来源于stack exchange，提问作者Chitrang Sharma