axios post提交的Content-Type

最新推荐文章于 2023-12-27 01:33:01 发布

weixin_33976072

最新推荐文章于 2023-12-27 01:33:01 发布

阅读量80

点赞数

文章标签： javascript json ViewUI

本文对比了jQuery.ajax与Axios的post请求方式的不同，重点介绍了将旧项目中jQuery.ajax替换为Axios时需要进行的配置调整，特别是如何设置请求头以确保与服务器端的兼容性。

使用axios的坑

jQuery.ajax的post提交默认的请求头的Content-Type: application/x-www-form-urlencoded
而axios.post提交的请求头是Content-Type: application/json。

application/json是一个趋势，但是如果改一个旧项目，把jQuery.ajax全部换成axios.post时，需要对请求做一些配置。

改之前的代码：

// 没有指定请求头的content-type
var data = {age: 18};
$.ajax({
    url: '',
    type: 'POST',
    data: data
    dataType: 'json',
    success: function(result) {
        // do something
    }
})

使用axios的代码

import axios from 'axios';
import qs from 'qs';

var data = {age: 18};
var url = '';

axios.post(
    url, 
    qs.stringify(data), 
    {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
).then(result => {
    // do something
})