跨域

最新推荐文章于 2024-07-26 15:01:02 发布

ERROR!!!!!!

最新推荐文章于 2024-07-26 15:01:02 发布

阅读量223

点赞数

分类专栏：前端交互文章标签：跨域动态添加 jsonp

本文链接：https://blog.csdn.net/liujiebahuang/article/details/93860418

版权

前端交互专栏收录该内容

13 篇文章

订阅专栏

这是一个基本不会遇到的问题，不过万一呢？？

跨域

不论ajax，还是promise交互，都遵循同源策略原则。也就是说：
http: 协议
localhost: 主机地址/域名
9090 端口号
三者中有一个不一样就是未遵循同源策略，就不可以使用ajax或this.$http.get/post方式。
但是在实际工作中运气实在不好（基本不会）会遇到接口地址和页面地址相左的情况，正常的交互方式就无法请求到数据。于是，出现了跨域问题。

解决跨域

总的来说，
get方式的跨域：JavaScript动态创建script标签
框架（比如vue）方式：jsonp ，其底层也就是动态创建script标签。

先和后台哥们儿商量好，搞个下面格式的data.txt

fn([
	{"name":"张三",sex:"男"}，
	{"name":"王五",sex:"女"}
])

来动态创建一下script标签

<body>
<button id="btn">btn</button>
<ul></ul>
</body>
<script>
function fn(data){//把结果当参数传递
	console.log(data);
	for(var i = 0;i<data.length;i++){
		var li = document.createElement("li");
		li.innerHTML = data[i].name;
		document.getElementsByTagName("ul")[0].appendChild(li);
	}
}
</script>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		var oScript = document.createElement("script");
		oScript.src = "data.txt";
		document.body.appendChild(oScript);
	}
</script>

jsonp的底层也就是动态创建script标签，动态创建script标签就是写一个script标签指向资源换了一种方式请求。
但是以上的方式并没有异步请求。当代码执行到这段代码时，整个页面都在等待中。Ajax是异步请求的，互不干扰的。所以动态创建会堵塞浏览器运行。不过这种问题一般很少遇到。

至此，vue中跨域时就用到下面这句。

this.$http.jsonp('',{params:{a:1,b:1}},{emulateJSON:true}).then((res)=>{res.data});

来段真实接口操作！key部分已经隐匿（花钱买的！！）

var vm = new Vue({
	el:"#box",
	created(){
		this.$http.jsonp('http://apis.juhe.cn/oil/region',
		{params:{
			key:'a*************************e',format:2,city:'北京'},
		},
		{emulateJSON:true})
		.then((res)=>{console.log(res.data)})
	}
})