vuejs中vue-resource或使用axios发送请求及解决跨域问题
1.安装axios,3种①.npm安装npm install axios②.使用淘宝源cnpm install axios③.或者使用cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2.在main.js文件里添加以下2行代码import axios from 'axios'Vue.pr
1.安装axios,3种
①.npm安装
npm install axios
②.使用淘宝源
cnpm install axios
③.或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
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);
}
);
更多推荐
所有评论(0)