[Ajax] 实现跨域访问
跨域访问是什么
同源策略
所谓“同源”指的是“三个相同”:
协议相同、域名相同以及端口相同。
- Cookie、LocalStorage和lndexDB无法读取
- DOM无法获得
- AJAX请求不能发送
| 同源 | 不同源 | |
|---|---|---|
| 网络协议 | 相同 | 相同 |
| 域名 | 相同 | 相同/不相同 |
| 端口号 | 相同 | 不相同 |
域名是什么
域名(Doain Name）又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。
| 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:8000/a.js和http://www.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://wwwa.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 | 不同域名 |
访问的URL地址:网络协议 ＋ 域名(IP地址）＋ 端口号 ＋ 资源路径
跨域是什么
当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。
出于安全原因，刘览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。
常见跨域分为以下两种:
| 跨域 | 解释 |
|---|---|
| 完全跨域 | 就是指一个顶级域名方向另一个顶级域名 |
| 跨子域 | 相同顶级域名下的两个子级域名相互通信 |
常见跨域
常见跨域
-
< link >元素
-
< script >元素
-
< img >元素
-
< iframe >元素
JSONP
JSONP是什么
JSONP (JSON with Padding ）是JSON的一种“使用模式”，可用于解决主流刘览器的跨域数据访问的问题。
利用< scrip >元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。
< script >元素实现
网页通过添加一个< script >元素，向服务器请求JSON数据，这种做法不受同源政策限制;服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
$.getJSON()方法
jQuery中的$getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。
$.get.JSON()方法的第一个参数表示url，需要在该参数后面添加“callback=?”。jQuery将“?”自动替换为正确的函数名，以执行回调函数。