实现跨域访问

跨域访问是什么

同源策略

1995年，同源政策由Netscape公司引人浏览器。目前，所有测览器都实行这个政策。同源政策的目
的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制：

1. Cookie、LocalStorage和IndexDB无法读取
2. DOM无法获得
3. AJAX请求不能发送

虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。

所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。

域名是什么

域名(Domain Name）又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

URL	说明
http://www.a.com/ajs和 http://www.a.con/bjs	同一域名下
http:/www.acorm/lablajs和 http://www.a.com/script/bjs	同一域名下不同文件夹
http:/www.acom:8000/ajs和 http://www.a.com/bjs	同一域名，不同端口
http;//www.acorm/ajs和 https://www.a.com/bjs	同一域名，不同协议
http:/www.acom/ajs和 http://127.0.0.100/b.js	域名和域名对应ip
http:/www.a.com/ajs和http://script.a.com/bjs	主域相同，子域不同
http://wAw.a.com/ajs和 http://a.com/bjs	同一域名，不同二级域名（同上)
http://www.a.com/ajs和 http://www.b.com/b.js	不同域名

访问的URL地址:网络协议＋域名(IP地址）＋端口号＋资源路径

• 同源：网络协议相同、域名相同以及端口号相同
• 不同源：
  1. 域名不相同：完全跨域
  2. 域名相同，端口号不同：跨子域

互联网默认原则:同源策略(不允许跨域访问)

跨域是什么

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。

出于安全原因，刚览器限制从脚本内发起的跨源HTTP请求。例如，XMlLHttpRequest和FetchAPl遵循同源策略HTTP资源。。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。
常见跨域分为以下两种：

• 完全跨域：就是指一个顶级域名方向另一个顶级域名。
• 跨子域：相同顶级域名下的两个子级域名相互通信。

常见跨域技术

常见跨域

HTML页面中一些允许指定路径的元素具有跨域特性:

• <link>元素
• <script>元素
• <img>元素
• <iframe>元素

<script src="https://cdn.bootcss.com/iquery/3.3.1/iquerv.is"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<img src="http://c.hiphotas.baidu.com/image/pic/item/b58f8c5494eef01f40ef23e9edfe9925bc317d26.jpg">

JSONP是什么

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流刘览器的跨域数据访问的问题。

利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。

script元素实现跨域访问

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制;服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

function addScriptlag(src) {
	var script = document.createElement('script');
	script.setAttribute("type"."text/iaxascript");
	script.src= src;
	document.body.appendChild(script);
}
window.anload = function (){
	addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {
	console.log('Your public lP address is:' + data.ip);
}

$.getJSON()实现跨域访问

jQuery中的$getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。

$.getJSON('http://127.0.0.1:3000?callback=?',function(data){
	consale.log(data);
});

注意：$.get.JSON()方法的第一个参数表示url，需要在该参数后面添加“callback=?”。jQuery将“?”自动替换为正确的函数名，以执行回调函数。