AngularJS 中使用 $http.post 方法时遇到 “415 Unsupported Media Type” 错误的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在使用 AngularJS 进行后端交互时，一般会使用 $http.post 方法向服务器发送 POST 请求。但有时候会出现 “415 Unsupported Media Type” 的错误，导致请求失败。本篇文章将介绍这个错误的原因以及解决办法。

问题出现的原因

AngularJS 中的 $http.post 方法默认 Content-Type 是 "application/json"，但有时候后端服务器接收不到这种格式的请求体。如果此时服务器返回了 "415 Unsupported Media Type" 错误，就表示请求的 Content-Type 格式与服务器所接收的不符合，导致请求失败。

解决办法

如果遇到了这种错误，可以通过修改请求头的 Content-Type 格式来解决问题。以下介绍几种解决方法。

方法一：修改默认 Content-Type 格式

可以通过修改 AngularJS 的默认 Content-Type 格式来解决问题。可以在应用的配置中修改该格式，示例代码如下：

angular.module('myApp', []).config(function($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
});

这段代码将默认 Content-Type 格式设置为 "application/x-www-form-urlencoded;charset=utf-8"。这种格式与服务器的接收方式比较相近，因此能够解决问题。

方法二：手动设置 Content-Type 格式

除了修改默认格式，我们还可以手动指定 Content-Type 格式。可以在发送 POST 请求时，增加一个 headers 属性，示例代码如下：

$http({
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
    method: 'POST',
    url: '/api/login',
    data: 'username=test&password=test'
});

这里将 headers 属性设置为要发送的 Content-Type 格式，即为 "application/x-www-form-urlencoded;charset=utf-8"。这样请求就可以正常发送了。

方法三：服务器接收 JSON 格式

最后，如果无法修改请求头并且服务器也不支持 "application/x-www-form-urlencoded" 格式，还可以通过让服务器接收 JSON 格式的请求体来解决问题。需要在请求时将传递的数据转换为 JSON 格式，示例代码如下：

$http({
    headers: {'Content-Type': 'application/json'},
    method: 'POST',
    url: '/api/login',
    data: {username: 'test', password: 'test'}
});

这里将 data 属性设置为一个对象，里面包含 username 和 password 两个属性。请求头的 Content-Type 格式则设置为 "application/json"，这样发送的请求就能够被服务器正确接收并处理。

总结

通过以上三种方法，我们能够有效地解决 “415 Unsupported Media Type” 错误，让请求能够正常发送并得到正确的响应。在使用 AngularJS 进行后端交互时，要根据服务器的接收方式，合理设置请求头的 Content-Type 格式。同时，在开发过程中也应多了解各个格式的优缺点以及使用场景，以便更好地应对不同的需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64cb73d45ad90b6d0420a7fe