一般来说,如果你在开发中需要进行跨域操作(从一个非同源网站发送请求获取数据),一般而言,你在浏览器控制台看到的结果为:
XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.
同源策略
说到跨域就不得不提“同源策略”。
同源策略是Web浏览器针对恶意的代码所进行的措施,为了防止世界被破坏,为了保护世界的和平,Web浏览器,采取了同源策略,只允许脚本读取和所属文档来源相同的窗口和文档的属性。
那么,怎么判断文档来源是否相同呢?很简单,看三个部分: 协议、主机、端口号。只要其中一个部分不同,则不同源。
跨域的应用场景
来自 home.example.com 的文档里的脚本读取 developer.example.com载入的文档的属性。
来自 home.example.com 的文档里的脚本读取 text.segmentfault.com载入的文档的属性。
如何跨域
设置domain属性
针对上述应用场景的***种情况,可以设置Document对象的domain属性。但是设置时使用的字符串必须具有有效的域前缀或者它本身。
PS: domain值中必须有一个点号。
PS: domain不能由松散的变为紧绷的。
//初始值 "home.example.com"
document.domain = "example.com"; //OK
document.domain = "home.example.com"; //NO,不能由松散变紧绷
document.domain = "example"; //NO,必须有一个点号
document.domain = "another.com"; //NO, 必须是有效域前缀或其本身
JSONP
JSONP由两部分组成: 回调函数和数据。
原理:通过动态<script>元素来使用,可以通过src属性指定一个跨域URL。