跨域（入门）

2019年8月24日 187次阅读 来源: 明矾

JS跨域

同源战略

所谓“同源”，就是“三个雷同”：协定雷同、域名雷同、端口雷同。
同源战略的目标：保证用户信息的平安，防备歹意网站盗取数据。
假如黑白同源，共有三种行动会受到限定：
1.Cookie、LocalStorage、IndexDB没法读取；
2.DOM没法猎取；（重要场景是ifame跨域的状况，差别域名的iframe是限定相互接见的）
3.AJAX要求不能发送；

跨域的处理要领

跨域资本共享（CORS）

html5新增的规范，IE10以下不支撑。
CORS是W3C的规范，全称是跨域资本共享(Cross-Origin Resource sharing)。CORS定义了必须在接见跨域资本时，浏览器与服务器应当怎样沟通。它的头脑就是运用自定义的HTTP头部让浏览器与服务器举行沟通，从而决议要求或响应是胜利照样失利。
运用：
关于前端，我们照样一般运用xhr对象发送ajax要求。唯一须要注重的是，我们须要设置xhr中的withCredentials为true，不然没法通报cookie，xhr.withCredentials=true;
关于服务端，须要在response header中设置以下两个字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的道理：在页面上引入差别域上的js剧本文件是能够的，所以能够经由过程动态建立script标签，然后应用src属性举行跨域。经由过程将前端要领作为参数通报到服务器端，然后由服务器端注入参数以后再返回，完成服务器端向客户端通讯。

注：src要求都必须是get要领，就像你在浏览器地点栏输入地点回车一样。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName('body')[0];
var script=document.getElement('script');
script.type='text/javascript';
script.src='demo.js?callback=fun';
body.appendChild(script);
//返回的js剧本直接会实行，就实行已定义好的fun函数，而且把数据传入进来。
fun({"name":"name"})

CORS VS JSONP
都能处理ajax直接要求一般文件存在跨域无权接见的题目
1.JSONP只能完成get要求，而CORS支撑一切范例的http要求
2.运用CORS，开发者能够运用一般的XHR提议要乞降取得数据，比起JSONP有更好的错误处理
3.JSONP重要被老的浏览器支撑，它们每每不支撑CORS，而当代浏览器都支撑CORS

document.domain

修正document.domain的要领只适用于差别子域的框架间的交互。
关于主域名雷同，而子域名差别的状况，能够运用document.domain来跨域 这类体式格局异常适用于iframe跨域的状况，比方：
a页面地点为 http://a.yourhost.com 
b页面为 http://b.yourhost.com。
如许就能够经由过程分别给两个页面设置 document.domain = http://yourhost.com 来完成跨域。
以后，就能够经由过程 parent 或许 window[‘iframename’]等体式格局去拿到iframe的window对象了。

postMessage

postMessage是html5的一个API，能够处理多窗口、窗口和iframe之间的音讯通讯的跨域题目。
postmessage(data, origin)，个中data指的就是须要通报的数据，origin指的是详细的数据源地点(包含协定+域名+端口)。然后window对message事宜举行监听。

<iframe id="iframe" src="http://next.com/next.html"></iframe>
<input id="msg" type="text" placeholder="输入要发送的音讯">
<button id="send">发送</button>

document.getElementById('send').onclick = function() {
    var msg = document.getElementById('msg').value;
    var iframeWindow = document.getElementById('iframe').contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}

<div>
    <h2>以下是接收到的音讯：</h2>
    <section id="msg">
         
    </section>
</div>

window.addEventListnerner('message',handle,false){//window对message时候监听
}
function handle(event){
    if(event.origin==='http://source.com'){
        document.getElementById('msg').innerHTML=event.data;
    }
}
    原文作者：明矾
    原文地址: https://segmentfault.com/a/1190000013773329
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞