vue配合axios进行post跨域请求

冯奎
2018-08-03 18:40:36
HTML
javascript vue

前一篇文章讲了axios的GET，今天来说一下axios的POST请求。

axios和jquery一样有两种post请求方式，
axios({ method: 'post',···}和axios.post()
这两种和jquery的$.ajax和$.post类似，
至于具体的使用方法可以参考官方文档。https://www.kancloud.cn/yunye/axios/234845

下面具体来说一下两者最大的区别，
在jquery中使用post方法会默认将Data转换成对象，
但是在axios中就需要我们手动去转，设置公共配置：
xios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
这样就以对象的方式去传递，

但是这样做还是不够的，还需要使用qs.js进行格式转换；
Qs.stringify({sign:'sign',ceshi:'ceshi'})
转成对象去传递，具体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue配合axios进行post跨域请求</title>
    <style type="text/css">
    </style>
</head>
<body>
<!-- vue axios获取数据 -->
<div class="vue_axios">
    <h1>{{ posts.messages }}</h1>
    <ul v-for="item in posts.data">
        <li>{{ item.article_id }}  {{ item.title }}</li>
        <li>{{ item.cat_id }}  {{ item.cat_name }}</li>
    </ul>
</div>
<!-- 引入veujs -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://api.example.com'; // 设置域名
    axios.defaults.withCredentials = true;  // 跨域请求
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置数据传输类型

    // axios 获取数据
    var vm = new Vue({
        el: '.vue_axios',
        data: {
            posts:{}
        },
        // 页面加载的时候会自动执行mounted
        mounted: function () {
            var _this = this
            axios({   // 进行post请求
                method: 'post',
                url: '/api/ceshi/ceshi',
                data: Qs.stringify({sign:'sign',ceshi:'ceshi'}), // json转字符串 参数传递
            })

            // axios.post('/Api/Article/ArticleList',Qs.stringify({sign:'sign',ceshi:'ceshi'}))
            .then(function (res) {
                console.log(res.data);
                _this.posts = res.data;
            }, function (error) {
                console.log(error);
            })
        }
    });
</script>
</body>
</html>

本文为冯奎原创文章，转载无需和我联系，但请注明来自冯奎博客fengkui.net