摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。最后，解决跨域问题还有一个更通用更强大的方法，我多带带把它拿出来总结了一篇文章跨域问题的根本解决方案。
什么是跨域？
要明白什么是跨域之前，首先要明白什么是同源策略？
同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢？
如果协议，端口（如果指定了）和主机对于两个页面是相同的，则两个页面具有相同的源，也就是同源。也就是说，要同时满足以下3个条件，才能叫同源：
协议相同
端口相同
主机相同
举个例子就一目了然了：
我们来看下面的页面是否与 http://store.company.com/dir/index.html 是同源的？
http://store.company.com/dir/index2.html 同源
http://store.company.com/dir2/index3.html 同源 虽然在不同文件夹下
https://store.company.com/secure.html 不同源 不同的协议(https)
http://store.company.com:81/dir/index.html 不同源 不同的端口(81)
http://news.company.com/dir/other.html 不同源 不同的主机(news)
所以当面对跨域问题的时候，有什么解决方案呢？
跨域的几种解决方案 document.domain方法我们来看一个具体场景：有一个页面 http://www.example.com/a.html ，它里面有一个iframe，这个iframe的源是 http://example.com/b.html ，很显然它们是不同源的，所以我们无法在父页面中操控子页面的内容。
解决方案如下：
所以我们只要将两个页面的document.domain设置成一致就可以了，要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域。
但是，这种方法只能解决主域相同的跨域问题。
window.name方法window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
我们来看一个具体场景，在一个页面 example.com/a.html 中，我们想获取 data.com/data.html 中的数据，以下是解决方案：
JSONP方法
JONSP(JSON with Padding)是JSON的一种使用模式。基本原理如下：
这时候在a.html中我们得到了一条js的执行语句dealData("data")，从而达到了跨域的目的。
所以JSONP的原理其实就是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句，仔细阅读以上代码就可以明白里面的意思了。
如果在jQuery中用JSONP的话就更加简单了：
注意jQuery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用JSONP的回调函数。
总结除了上述方法外，HTML5还新增了一个window.postMessage()方法，有兴趣的可以自行查阅。
最后，解决跨域问题还有一个更通用更强大的CORS方法，我多带带把它拿出来总结了一篇文章：跨域问题的根本解决方案CORS 。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107469.html
摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。 前言 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码 一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心...
摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。 前言 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码 一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心...
摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出iss...
摘要：什么是跨域个人一句话解释如果与不同源，那么页面不能获取页面的资源。所以用同源策略来限制跨域是必须的。它是标准，是跨源请求的根本解决方法。 本文整理了一些有关跨域的基础知识和细节问题。 什么是跨域 个人一句话解释：如果 url A 与 url B 不同源，那么页面A不能获取页面B的资源。这里有两个关键词：url 和 同源，浏览器的同源策略就是针对两个url，它们满足以下三个条件，才是同源...
阅读 2262·2023-04-25 14:50
阅读 1239·2021-10-13 09:50
阅读 1867·2019-08-30 15:56
阅读 1841·2019-08-29 15:29
阅读 2888·2019-08-29 15:27
阅读 3549·2019-08-29 15:14
阅读 1194·2019-08-29 13:01
阅读 3301·2019-08-26 14:06
