meface/docs/article/web/js/axios.md

title	date	author	tags	categories
使用axios问题小结	2021-02-22	ac	axios	Web

问题一：axios发送post请求，后端使用HttpServletRequest接受不到参数

问题场景：

前端发送post 请求：

axios({
    url: this.serverUrl + "/login/checkUser",
    data: {
        'name':'张思瑞',
        'password': '333',
        'validate': 'haha'
    },
    method: "post"
}).then((response) => {
    console.log(response);
});

后端使用springMVC接收：

@RequestMapping("/login/checkUser")
@ResponseBody
public Map<String,Object> checkUser(HttpServletRequest request){
    String userName = request.getParameter("name");
    String password = request.getParameter("password");
    String validate = request.getParameter("validate");
    ...
}

接口可以调通，但是request中找不到传送过来的数据。查看请求头发现Content-Type是application/json;charset=UTF-8，请求数据的格式如下：

问题分析：

发送Post请求，参数都是在请求正文中传递到服务端。

但axios会自动转换请求头和响应头数据。经过查阅网上资料发现，不管是下面哪种方式：

//方式一
axios({
    url: this.serverUrl + "/login/checkUser",
    data: {
        'name':'张思瑞',
        'password': '333',
        'validate': 'haha'
    },
    method: "post"
})
//方式二
axios.post(this.serverUrl + "/login/checkUser",{
    'name':'张思瑞',
    'password': '333',
    'validate': 'haha'
})

发送post请求都会进入axios中的transformRequest中的isObject(data)代码块中：

transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Content-Type');
    if (utils.isFormData(data) ||
        utils.isArrayBuffer(data) ||
        utils.isBuffer(data) ||
        utils.isStream(data) ||
        utils.isFile(data) ||
        utils.isBlob(data)
       ) {
        return data;
    }
    if (utils.isArrayBufferView(data)) {
        return data.buffer;
    }
    if (utils.isURLSearchParams(data)) {
        setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
        return data.toString();
    }
    if (utils.isObject(data)) {
        setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
        return JSON.stringify(data);
    }
    return data;
}],

也就是说，使用上述的方式发送post请求，Content-Type都会变成application/json;charset=utf-8。但在全局的axios默认值中，

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

问题二：axios访问服务器Session丢失问题

问题场景：

之前在做一个vue项目的时候，需要用到验证码，所以将生成的验证码保存在后端的session中，当用户提交表单时，再从session中取出来进行校验。但出现了访问不到session数据的问题。

问题分析：

开发环境中前后端分离端口号不同导致跨域问题，因为跨域请求时，每次ajax请求都是新的session，导致无法获取验证码信息。

解决方法：

每次axios发起跨域类型请求时必须要带上cookie到后端