搞大前端的，肯定都会遇到跨域问题的,虽然网上这方面的资料也很多，但我还是喜欢自己写一遍，自己理解过、总结过的东西才记得最深刻。
同源策略
JavaScript 的同源策略，是由Netscape提出的一个著名的安全策略，为了阻止A站的JS去操作别的网站的数据。你想啊，你现在打开了浏览器，在一个tab窗口中打开了银行网站，在另外一个tab窗口中打开了一个恶意网站，而那个恶意网站挂了一个的专门修改银行信息的JavaScript，当你访问这个恶意网站并且执行它JavaScript时，你的银行页面就会被这个JavaScript修改（比如说获取你的卡号和密码，又或者是转账到黑客的账户上等等），后果会非常严重！而同源策略就为了防止这种事情发生，它规定了A网站下的JS文件只能操作A网站下的数据，不能去操作B网站的数据。
为了方便理解,我们把这个词拆分成同源和策略这2个词吧（原谅我，我就怕你不理解啊）。
所谓同源指的就是指资源是来自同一个源的。如果两个页面拥有相同的协议，端口号，和主机（包括子域名和主域名），那么这两个页面就属于同一个源。
所谓策略指的是可以做什么事情。同一个源下的JS可以操作同一个源下的数据。
举个例子来看看你理解了没有吧，看下面这个链接，协议是http协议，主机是store.company.com，端口号一般默认的都是80了。然后和下面的这个表中的各个URL进行比较，判断一下哪些是同源的，哪些不是同源的。
| Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221,221); vertical-align: bottom; border-bottom-style: solid; border-left-color: rgb(221,221); font-weight: normal; outline-width: medium !important; padding-bottom: 0.5em; font-style: normal; border-bottom-color: rgb(221,221); text-align: left; padding-top: 0.5em; border-right-style: solid; outline-style: none !important; padding-left: 0.5em; margin: 0px; border-left-style: solid; border-right-color: rgb(221,221); outline-color: invert !important; line-height: 1.5; padding-right: 0.5em">URL | Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.5; padding-right: 0.5em">结果 | Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.5; padding-right: 0.5em">原因 | |
|---|---|---|---|
| Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); vertical-align: top; border-bottom-style: solid; border-left-color: rgb(221,221); outline-width: medium !important; padding-bottom: 0.5em; border-bottom-color: rgb(221,221); text-align: center; padding-top: 0.5em; border-right-style: solid; outline-style: none !important; padding-left: 0.5em; margin: 0px; border-left-style: solid; border-right-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">http://store.company.com/dir2/other.htmlBox-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">同源Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">Box-sizing: border-Box; outline-width: medium !important; padding-bottom: 0px; padding-top: 0px; outline-style: none !important; padding-left: 0px; margin: 0px; outline-color: invert !important; line-height: 1.6; padding-right: 0px"> | Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">http://store.company.com/dir/inner/another.htmlBox-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">https://store.company.com/secure.htmlBox-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">非同源Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">协议不同Box-sizing: border-Box; outline-width: medium !important; padding-bottom: 0px; padding-top: 0px; outline-style: none !important; padding-left: 0px; margin: 0px; outline-color: invert !important; line-height: 1.6; padding-right: 0px"> | Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">http://store.company.com:81/dir/etc.htmlBox-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">端口不同Box-sizing: border-Box; outline-width: medium !important; padding-bottom: 0px; padding-top: 0px; outline-style: none !important; padding-left: 0px; margin: 0px; outline-color: invert !important; line-height: 1.6; padding-right: 0px"> | Box-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">http://news.company.com/dir/other.htmlBox-sizing: border-Box; height: 40px; border-top-color: rgb(221,221); outline-color: invert !important; line-height: 1.6; padding-right: 0.5em">主机不同
什么是跨域 跨域
跨域的解决方案方案1-JSONPJSONP是JSON with padding的简写。JSONP由两部分组成:回调函数和数据。 回调函数是客户端和服务端约定好一个函数名，一般在请求中指定。 数据是传入回调函数中的JSON数据。 JSONP是通过动态的
问题一：JSONP是需要动态创建script标签的，我们需不需要处理这些script元素？怎么处理？问题二：JSONP请求的时候，服务器发生错误该怎么办，比如服务器崩掉，比如返回了404页面，前端该怎么处理这个错误，难道直接让它抛出么？答案JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求 JSONP的兼容性好，不需要XMLHttpRequest的支持 方案2-跨域资源共享CORS跨域资源共享定义了在必须访问跨域资源的时，浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP 头部，让服务器与浏览器进行沟通，主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的的。 方案3-document.domain浏览器的同源策略使得不同域的框架是不能进行JS的交互操作的。比如：有一个页面是,在这个页面中还有一个，很显然，a.html与b.html是不同域的，所以我们无法通过在页面中书写js代码来获取iframe中的东西，但是，如果我们把这2个页面的document.domain都设置成相同的域名就可以了，需要注意的是，我们只能把document.domain设置成自身或更高一级的父域，且主域名必须相同。 使用条件document.domain适用于不同子域的框架之间的交互。 方案4-window.namewindow对象有个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。 方案5-window.postMessagewindow.postMessage（message,targetOrigin）方法，可以用来向其他的window对象发送消息，无论这个window对象是属于同一个源还是不同源 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对编程之家的支持! 猜你在找的JavaScript相关文章 |
