您的位置：首页 > 产品设计 > UI/UE

vue.js(vue-resource) ---jsonp跨域

2017-08-12 23:32 471 查看

之前的笔记说axios没有办法处理跨域问题，所以就引入了vue-resource。使用jsonp来解决跨域问题.

vue-resource的基本用法:

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [options])

参考下载文档地址:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

跨域搜索360搜索案例:

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource/vue-resource.js" ></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:"#main",
data:{},
methods:{
sendJSONP1:function(){
//
this.$http.jsonp("https://sug.so.360.cn/suggest",{
params:{
word:'a'
}
}).then(resp=>{
console.log(resp.data.s);
},response => {
console.log("发送失败"+response.status+","+response.statusText);
});
}
}
});
}

</script>
</head>
<body>
<div id="main">
<button type="button" @click="sendJSONP1">向360搜索发送请求</button>
</div>
</body>
</html>

注：this.$http 在引入vue-resource.js 之后，在你创建vue实例的时候就会有$http属性来完成vue发送http请求的需求。具体的可以参考AIP文档。

运行结果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航