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

时间 2019-11-10

标签 vue.js vue resource jsonp 栏目 JavaScript 繁體版

原文原文链接

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

vue-resource的基本用法:html

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])vue

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

跨域搜索360搜索案例:ios

代码：
git

<!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文档。github