vue配合axios进行post跨域请求

前一篇文章讲了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>

冯奎博客
请先登录后发表评论
  • latest comments
  • 总共4条评论
冯奎博客

别忘了微笑 :学到了

2020-09-03 11:20:02 回复

冯奎博客

Dante :学到了,特别注意的是,如果在后台设置了白名单是*,要把axios.defaults.withCredentials设置为false

2019-03-29 14:25:34 回复

冯奎博客 冯奎博客

岁月清浅 安之若素 :我试了一下是这样,学到了。

2019-03-29 15:09:18 回复

冯奎博客

牛牪犇 冯奎博客

2018-09-26 16:32:15 回复