vuejs中vue-resource或使用axios发送请求及解决跨域问题

1.安装axios，3种

①.npm安装

npm install axios

②.使用淘宝源

cnpm install axios

③.或者使用cdn：

2.在main.js文件里添加以下2行代码

import axios from 'axios'
Vue.prototype.$http = axios
           

3.完成以上操作即可在methods使用以下2中发送请求：

①.直接使用

varurl="/abc/a/b/c"
this.$http.post(url,{table:this.param1.table},{emulateJSON:true})
   .then(function (res) {
      console.log(res);
      alert("添加成功");
       location.reload();
 });
methods:{
resdata:function(){
varurl="/abc/a/b/c"
this.$http.get(url)
  .then(function (res) {
    console.log(res);
  });
}
}
           

②.如果使用以下代码发送请求：

methods:{
resdata:function(){
var url='a/b/c';
axios.post(url)
.then( res=>{
  console.log(res)
  })
}
}
           

则要在使用此代码的组件中引入axios，代码如下：

import axios from ‘axios’;

4.解决跨域问题：

①在 config>index.js 的 dev 中添加配置项 proxyTable：

dev: {

env: require(‘./dev.env’),

port: 8088,

autoOpenBrowser: true,

assetsSubDirectory: ‘static’,

assetsPublicPath: ‘/’,

proxyTable: {

‘/abc’: {

//需跨域请求的地址

target: ‘http://localhost:8089/abc‘,

changeOrigin: true,

pathRewrite: {

‘^/abc’: ”

}

}

},

②.安装vue-resource

npm install vue-resource

③main.js添加如下2行代码：

import VueResource from ‘vue-resource’;

Vue.use(VueResource)

④完成以上即可使用：

//注意此段路径开头要和代理路径末尾的/abc相同

this.$http.post(“/abc/a/b/c”,{uName:“hyf”,uPwd:”123”},{emulateJSON: true})

.then(

(response)=>{

console.log(response);

},

(error)=>{

console.log(error);

}

);