聊聊跨域

最新推荐文章于 2021-04-20 11:06:15 发布

EmailyT

最新推荐文章于 2021-04-20 11:06:15 发布

阅读量273

点赞数

分类专栏：前端文章标签： js 跨域

本文链接：https://blog.csdn.net/tang422622/article/details/86630514

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

我了解的跨域

跨域：是指不能调用和自己协议、端口号、域名不相等的接口，比如在localhost:8081下面的a.html给localhost:8082下面的b.html发送一个请求，就会报跨域的错误。如下图：

那么怎样解决呢，有那种方法呢？
1、使用CORS解决
2、使用JSONP解决
3、使用window .name(+iframe)实现
4、window .postMessage实现

CORS
关于CORS实现主要是设置Access-Control-Allow-Origin 和 Access-Control-Allow-Methods ，前者值设置为‘*’，后者是发送请求的方式可以设置为常用的GET、POST也可以设置全部： PUT, POST, GET, DELETE, OPTIONS，Access-Control-Allow-Credentials(这个头部信息只会在服务器支持通过cookies传递验证信息的返回数据里。它的值只有一个就是 true。跨站点带验证信息时，服务器必须要争取设置这个值，服务器才能获取到用户的cookiehttps://www.jianshu.com/p/f9c21da2c661)。

JSONP
jsonp实现跨域主要是利用script中的src标签来实现的，标签中有src属性的不会受同源策略约束来跨域获取数据（具体为啥不会受约束可以网上搜搜），这样的话我们就可以创建一个script标签把其中的src赋值我们要请求的地址就行了。
jsonp主要有两部分组成，回调函数和数据，回调函数就是当请求的页面成功响应时应该调用的函数，该回调函数的名称通常在src请求中指定。
使用jsonp来实现一个例子：

index.html

	<button id="btn">点击获取内容</button>
    <div id="show"></div>
    
js中
 window.onload = function () {
        var btn = document.getElementById('btn');
        btn.onclick=function () {
            //JSONP解决跨域
            // JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。
            // 回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据
            var script = document.createElement('script');    //动态创建标签
            script.src = 'https://api.douban.com/v2/book/search?q=javascript&count=1&callback=ResponseData';     //ResponseData为回调函数名称
            document.body.insertBefore(script,document.body.firstChild);    //插入节点
        }
    };

//成功时执行回调
    function ResponseData(data) {
    var btn = document.getElementById('show');
        console.log(data);
        show.innerText(data);
    }

对于不习惯使用原生js请求的话，那么可以使用jquery的方式来发送ajax，因为jquery封装了jsonp。有两个种方式：一是使用$.ajax()方式，把其中的dataType 设置为jsonp ,并为jsonpCallback 指定一个回调函数名称。二是使用 $.getJSON()方式，只要在请求地址中加上callback=? 即可，PS:jsonp只能支持get请求方式。
window .name
name属性是window窗口的一个属性，一旦设置了这个属性的值，那么你的项目中的页面都可以获取到这个值，当然，你也可以在其他页面中更改这个值。

localhost:8081/a.html
	<script>
		window.name = "我的值可以在任何页面获取到"   //设置值
	</script>
	
localhost:8088/b.html
	<iframe src="localhost:8081/a.html" id="proxy" onload = Getdata()></iframe>
	<script>
		function Getdata(){
			var ifr = document.getElementById('proxy');  //获取iframe标签
			ifr.onload = function(){
				var data = ifr.contentWindow.name;    //可以获取到a.html中设置的window.name
			}
			ifr.src = 'proxy.html'   //这个页面地址要和b.html同源
		}
	</script>

上面例子中得proxy.html得目的是为了让b.html获取到iframe中得内容。设置window.name的值时只能为字符串类型，其存储空间也有限制，只能在2MB之内(没有测试过)。
window .postMessage
window .postMessage这个是H5新增的特性，已经明确指出可以安全的实现跨源通信。
语法： otherWindow.postMessage(message, targetOrigin, [transfer]);

上图是我在MDN搜索出来的结果，理解着看看吧。。那就来个例子吧。

http://www.google.com/a.html

	<iframe src="http://www.baidu.com/b.html" id="ifr" "Getdata()"></iframe>
	<script>
		function Getdata(){
			var ifr = document.getElementById('ifr');
			ifr.contentWindow.postMessage("我是要发送的内容。。。",'*') //第二个值指定可以来自不同域访问的地址
		}
	</script>

http://www.baidu.com/b.html

	<button id="btn">点击获取</button>
	<script>
		var btn = document.getElementById('btn');
		btn.onmessage = function(e){  //注册onmessage事件
			alert(e.data);   //通过data获取到接收的信息
		}
	</script>

运行b.html点击button按钮就可以获取到a.html中发送的数据了。其中，postMessage 的第一个值也必须是字符串类型。
最后的总结语： 这是我这了解跨域知识的时候做的一些笔记，方便自己以后查看，同时也希望能够帮助到大家。
参考博客链接：https://www.cnblogs.com/2050/p/3191744.html