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

懵懂的女人 提交于 2019-12-10 13:39:00

之前的笔记说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文档。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!