实现跨域访问
同源策略
1995年,同源政策由Netscape公司引入浏览器。目前,所有浏览器都实行这个政策。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。随着互联网的发展,“同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制:
- Cookie、LocalStorage和IndexDB无法读取
- DOM无法获得
- AJAX请求不能发送
虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。
所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。
域名是什么
域名(Domain Name)又称为网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。
URL | 说明 |
---|---|
http://www.a.com/a.js和http://www/a.com/b.js | 同一域名下 |
http://www.a.com/ab/a.js和htp://www.a.com/scriptb.js | 同一域名下不同文件夹 |
http://www.a.com:8000/a.js和http://ww.a.com/b.js | 统一域名,不同端口 |
http://www.a.com/a.js和https://www/a.com/b.js | 统一域名,不同协议 |
http://www.a.com/a.js和http://127.0.0.100/b.js | 域名和域名对应IP |
http://www.a.com/a.js和http://script.a.com/b.js | 主域相同,子域不同 |
http://www.a.com/a.js和http://a.com/b.js | 同一域名,不同二级域名(同上) |
http://www.a.com/a.js和http://www.b.com/b.js | 不同域名 |
跨域是什么
当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求。
出去安全原因,浏览器限制从脚本内发起的跨源HTTP请求。例如,XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。
常见跨域分为以下两种:
- 完全跨域:就是指一个顶级域名方向向另一个顶级域名,
- 跨子域:相同顶级域名下的两个子级域名相互通信。
常见跨域
HTML页面中一些允许指定路径的元素具有跨域特性:
- < link>元素
- < scrip>元素
- < img>元素
- < iframe>元素
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<img src="http://c.hiphotos.baidu.com/image/pic/item/WechatIMG6.jpeg">