AngularJS v1.8.x的$http发POST请求无法像jQuery $.ajax一样传递FormData

问题根因 #

你的$http配置存在两处核心错误，导致FormData没有被正确发送：

1. 请求方法配置错误：AngularJS的$http请求方法用method字段声明，不是jQuery的type字段，你配置的type: "POST"完全不生效，默认会发送GET请求，GET请求自然不会携带请求体载荷。
2. transformRequest配置位置错误：该配置是$http的顶层参数，不是headers的子属性。你把它放在headers中不会生效，AngularJS默认会自动序列化请求体为JSON格式，直接把你传入的FormData对象转义/覆盖，所以看不到Form Data载荷。

修正后的$http配置 #

var httpOptions = {
    method: "POST", // 替换原有的type字段
    url: getFullUrl(),
    data: prepData(form),
    responseType: self.dataType, // jQuery的dataType对应$http的responseType
    headers: {
        "translate": User.settings.lang,
        "userid": User.logged,
        "Content-Type": undefined // 保留该配置，让浏览器自动生成带boundary的multipart/form-data头
    },
    transformRequest: angular.identity, // 放在顶层，告知Angular不要修改请求体，直接原样发送
    eventHandlers: { 
        "readystatechange": function(event) {
            this.xhr = event.currentTarget;
        }
    }
};

// 调用示例
$http(httpOptions).then(function (response) {
    // 处理返回结果
}).catch(function (error) {
    // 处理错误
});

补充说明 #

• angular.identity是AngularJS内置的函数，作用是返回传入的参数本身，设置为transformRequest的值后，Angular就不会对FormData做任何序列化处理，完全保留你预处理好的表单数据。
• 不需要手动设置X-Requested-With: XMLHttpRequest，AngularJS发送AJAX请求时会默认携带该头。
• 配置生效后即可在开发者工具中看到和jQuery$.ajax一致的Form Data载荷，后端接收逻辑不需要做任何修改。

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