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

之前的笔记说axios没有办法处理跨域问题，所以就引入了vue-resource。使用jsonp来解决跨域问题. vue-resource的基本用法: get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])p

string_user_get_set

5994人浏览 · 2017-08-12 23:32:27

string_user_get_set · 2017-08-12 23:32:27 发布

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

运行结果:

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^