# 跨域 ## 为什么会有跨域 由于浏览器的同源策略限制，浏览器会拒绝跨域请求。并不所有的跨域请求，实际上是拒绝的跨域的读操作。 * 通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向； * 通常浏览器允许跨域资源嵌入（Cross-origin embedding），如 img、script 标签； * 通常浏览器不允许跨域读操作（Cross-origin reads） ## 什么情况下是跨域 协议，端口，主机 在这三者相同的情况下称为同域，或者说其他情况都是跨域。  ## JSONP 实现一个jsonp ~~~ <script> function addJsonp(src) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.src = src; document.body.appendChild(script); } window.onload = function () { addJsonp('aaaaaaa?callback=cbk'); } function cbk(res) { console.log(res); } </script> ~~~ 重点在于src中的?callback=xxx 使用jsonp需要定义回调函数来处理返回的数据。 jsonp只支持GET请求。 ## postMessage postMessage 允许在两个页面或frame中传递数据，无论同源与否。 在a.html中新建iframe，src为9090接口。 ~~~ <iframe src="http://127.0.0.1:9090/b.html" frameborder="0" id="ifra" name="postIframe" onload="messageLoad()"></iframe> ~~~ 加载完成后调用onload方法： ~~~ function messageLoad(){ var url = "http://127.0.0.1:9090"; window.postIframe.postMessage("给我tsort的信息",url); // 两个参数分别为传的data与url } ~~~ 在页面接收到postMessage的数据时，会触发onmessage事件。可以进行处理。 ~~~ window.onmessage = function(e){ e = e || event; alert(e.data); } ~~~ #### 实例 a.html 端口8080 ~~~ <iframe src="http://127.0.0.1:9090/b.html" name="postIframe" onload="messageLoad()"></iframe> <script> function messageLoad(){ var url = "http://127.0.0.1:9090"; window.postIframe.postMessage("给我tsort的信息",url); //发送数据 } window.onmessage = function(e){ e = e || event; console.log(e.data); //接收b返回的数据，在控制台有两次输出 } </script> ~~~ b.html 端口9090 ~~~ <script> window.onmessage = function(e){ e = e || event; alert(e.data); //立即弹出a发送过来的数据 e.source.postMessage("好的，请稍等三秒！",e.origin); //立即回复a var postData = {name:"tsrot",age:24}; var strData = JSON.stringify(postData); //json对象转化为字符串 setTimeout(function(){ e.source.postMessage(strData,e.origin); },3000); //3秒后向a发送数据 } </script> ~~~ ## CORS 另一部分整理了 ## 参考 [跨域](https://juejin.im/post/59c132415188256bb018e825) [html5 API postMessage跨域详解](https://github.com/tsrot/study-notes/blob/master/html5%20API%20postMessage%E8%B7%A8%E5%9F%9F%E8%AF%A6%E8%A7%A3.md) [前端跨域的整理](https://qiutc.me/post/cross-domain-collections.html)