Vue使用Axios实现http请求以及解决跨域问题

参考：https://www.jianshu.com/p/3ab216fa185c

axios快速使用

示例demo

Vue使用Axios实现http请求以及解决跨域问题

引入qs 库

cnpm install qs

vue2.0下axios实现跨域踩的坑

VUE axios 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource.

cnpm install qs

----------组件.vue-----------
 import axios from 'axios'
 import qs from 'qs';
var data = qs.stringify({
 timeType:'Month',
           pointId:'40,30,31,34,39,43,35,29,38,26,27,28,36,41,42,32,33',
           startTime:'2019-4',
           endTime:'2019-4',
           dtBiDuiYear:'2018',
           factor:'a34052',
});

 axios.post('/GetCompareData', data)
        .then(function (response) {
          console.log(response.status);
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });

---------config/index.js  转发代理-------
 proxyTable: {
      '/GetSoilTypeInfo':{                                // 要代理的接口名
          target:'要转发的接口',   // 要代理的接口地址
          changeOrigin:true,                            // 允许跨域         
          pathRewrite:{'^/GetSoilTypeInfo':''}         // 接口名重写
        },
        '/GetTreeListForSoilByRegion':{                                // 要代理的接口名
          target:'要转发的接口',   // 要代理的接口地址
          changeOrigin:true,                                    // 允许跨域
          pathRewrite:{'^/GetTreeListForSoilByRegion':''}       // 接口名重写
        },
        '/GetCompareData':{                                // 要代理的接口名
          target:'要转发的接口',   // 要代理的接口地址
          changeOrigin:true,                                    // 允许跨域
          pathRewrite:{'^/GetCompareData':''}       // 接口名重写
        }

    },

　　

 

转载于:https://www.cnblogs.com/yingyigongzi/p/10796397.html