一.同源策略
同源是指两个页面的协议、域名和端口都一样,即两个页面具有相同的源。
在一个网页中,同源策略是浏览器最基本也是最核心的安全功能,同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互,是用于隔离潜在恶意文件的关键安全机制。
同源检测示例:
http://www.example.com/dir/page.html
URL | 结果 | 原因 |
http://www.example.com/dir2/other.html | 成功 | 协议、域名、端口相同 |
http://www.example.com/dir/inner/another.html | 成功 | 协议、域名、端口相同 |
https://www.example.com/secure.html | 失败 | 协议不同 ( HTTPS ) |
http://www.example.com:81/dir/etc.html | 失败 | 端口不同 ( 81 ) |
http://news.example.com/dir/other.html | 失败 | 域名不同 |
二.跨域
2.1什么是跨域
两个 URL 的 协议 ,主机名 ,端口号出现不完全一致的情况就是跨域 。出现跨域的根本原因是因为:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
2.2浏览器对跨域请求的拦截
浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到。
2.3如何实现跨域请求
当今最为主要的两种解决方案,分别是 JSONP 和CORS。
方案 | 时间 | 来源 | 优点 | 缺点 |
JSONP | 较早 | 民间 | 兼容性好 | 只支持GET请求 不支持POST请求 |
CORS | 较晚 | W3C标准 | 属于跨域Ajax请求的根本解决方案,支持GET和POST请求 | 不兼容某些低版本的浏览器 |
目前 JSONP 在实际开发中很少会用到,CORS 是跨域的主流技术解决方案。