vue项目4xx报错分析和解决

1. 4xx （Client Error 客户端错误状态码）

4xx状态码是客户端错误状态码。
4xx的响应结果表示客户端发生错误的原因所在。

1. 400 bad request
   客户端请求的语法错误，服务器无法理解。
2. 401 unauthorized
   请求要求用户的身份认证。
3. 403 forbidden
   服务器端理解客户请求，但是拒绝执行此请求。
4. 404 not found
   服务器无法找到请求的资源
5. 405 method not allowed
   该状态码表示客户端请求的方法虽然能被服务器识别，但是服务器禁止使用该方法。

2. vue项目403报错

在做资源池管理开发的时候，发现vue项目报403错误，经过排查发现后端和前端都有问题。

2.1 后端问题

后端只设置了允许put请求，get请求和delete请求。但是那个接口是post请求，所以一直报403错误。后端将问题解决后，虽然返回的状态码200，但是拿不到数据。
下面是返回的状态码：

下面是响应的结果：

{"status":"fail","data":{"errCode":10000,"errMsg":"未知错误"}}

2.2 前端问题

经过排查，上面报200状态码，但是拿不到数据的问题是因为，请求头的设置不对。
之前的设置：

this.$axios.post("/api/resources/update",{    
            id: updateData.updatePoolId,
            incremental_max: parseInt(updateData.updateMaxavailable),
            incremental_sold: parseInt(updateData.updateSold)
        },{
            'Content-Type': 'multipart/form-data'
             
        })

修改后的设置：

this.$axios.post("/api/resources/update",{    
            id: updateData.updatePoolId,
            incremental_max: parseInt(updateData.updateMaxavailable),
            incremental_sold: parseInt(updateData.updateSold)
        },{
            headers:{
                'Content-Type': 'multipart/form-data'
            }         
        })

数据请求成功：

2.2.1 请求头headers的类型

配置axios请求头headers中的content-type属性指定数据类型。
axios使用post发送请求，默认是将json数据放到请求提中提交到后端的。也就是说，我们的Content-Type默认变成了application/json。但是我们后端要求的Content-Type的数据类型可能是application/x-www-form-urlencoded,这就会导致虽然请求成功了，但是我们拿不到数据。

1. application/json

headers: {
     'Content-Type': 'application/json'
 }

这种类型是最常用的，也是默认的请求头格式，用来告诉服务器消息主体是序列化后的JSON字符串。

2. application/x-www-form-urlencoded

headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
 }

3. multipart/form-data

headers: {
     'Content-Type': 'multipart/form-data'
 }

4. text/xml

headers: {
     'Content-Type': 'text/xml'
 }

3. vue项目404报错

404状态码表示服务器无法找到请求的资源，常见原因是url的地址拼写错误，建议仔细检查！！！
如：我项目中的url地址为/api/resources/create，其中的resources拼写错误，所以报了404错误。

4. vue项目405报错

405状态码表示客户端请求的方法虽然能被服务器识别，但是服务器禁止使用该方法。常见原因是url地址弄混，建议仔细检查。
如：

this.$axios.delete('/api/resources/list')

'/api/resources/list'是查询列表的意思，只允许get方法，而不允许delete方法，所以报了405错误。将请求地址改成下面的形式才能正确发起delete请求。

this.$axios.delete('/api/resources/delete')