博客

在angular 1.4版本的项目中，程序一直运行正常，突然有一天，在提交表单时，提示“HTTP 405”错误——“Method Not Allowed”。

从字面上的意思理解，很显然是提交方法的类型错误，要么是以GET方式向POST接口提交数据，要么是POST方式项GET接口提交数据，但反反复复检查了后端接口与提交方式，都是POST，完全没有问题。

仔细检查前端代码，发现编写方式如下:

$http({
    method : 'POST',
    url : '/test',
    params : {
        cycle : key,
        emp_id : user.id
    }
 }).success(function (resp) {
    //  处理逻辑
 });

这样的编程方式有两个问题：

1. 提交的参数暴露在外；

2. 默认提交的Header参数“content-type”为“application/json”;

但经过反复的实验，请参见《浏览器查询参数与表单数据的优先级》，第一个问题不会导致405错误，所以很容易确定问题所在，解决办法是明确指定“content-type”，如下：

$http({
    method : 'POST',
    url : '/test',
    params : {
        cycle : key,
        emp_id : user.id
    },
    //  新增content-type头部属性
    heads : {
        'content-type' : 'application/x-www-form-urlencoded'
    }
 }).success(function (resp) {
    //  处理逻辑
 });

如果要解决第一个问题，那么只需要引入$httpParamSerializer服务即可，如下：

$http({
    method : 'POST',
    url : '/test',
    //  以表单方式提交，将Object转换为form参数方式
    data : $httpParamSerializer({
        cycle : key,
        emp_id : user.id
    }),
    //  新增content-type头部属性
    heads : {
        'content-type' : 'application/x-www-form-urlencoded'
    }
 }).success(function (resp) {
    //  处理逻辑
 });

结论

在发生HTTP 405错误，不妨首先检查下请求头部的“content-type”信息。