我了解的跨域
跨域:是指不能调用和自己协议、端口号、域名不相等的接口,比如在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