详解 js 跨域

前言

JavaScript 语言本身从安全性触发限制 js 脚本只能访问同一来源的资源，如果当前脚本和被访问的资源不属同一来源，在访问时会立即触发跨域。

什么是跨域

跨域问题是由于 javascript 语言安全限制中的同源策略造成的 . 同源策略是指一段脚本只能访问来自同一来源的资源,这里的同一来源指的是主机名、协议和端口号的组合 .

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名	不允许（cookie这种情况下也不允许访问）
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

跨域资源共享（ CORS ）

CORS （ Cross - Origin Resource Sharing ）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。 CORS 背后的基本思想就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

var xhr = new XMLHttpRequest() ;
xhr.open("GET", "/userlist",true) ;
xhr.send();

以上的 / userlist 是相对路径，相当于访问当前同一来源的资源，自然没有跨域问题。如果我们要使用 CORS ，相关 Ajax 代码可能如下所示：

var xhr = new XMLHttpRequest() ;
xhr.open("GET", "http://www.test.com/u/userlist",true);
xhr.send();

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于 CORS 的支持，主要就是通过设置 Access - Control - Allow - Origin 来进行的。如果浏览器检测到相应的设置，就可以允许 Ajax 进行跨域的访问。

实际开发中，时常会需要跨域访问别的域的资源（天气预报数据、第三方平台图片、音频、视频数据等），这时你可以用 CORS 解决跨域问题，具体的跨域解决方案，下篇文章会有介绍。