实现跨域访问

同源策略

如果非同源，三种行为受到限制：
1.Cookie、LocalStorage和indexDB无法读取
2.DOM无法获得
3.AJAX请求不能发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响
所谓"同源"指的是"三个相同"：协议相同、域名相同以及端口相同

• 域名

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

• 跨域

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求
处于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如：XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源
常见跨域分为两种：
1.完全跨域：就是指一个顶级域名反向另一个顶级域名
2.跨子域：相同顶级域名下的两个子级域名相互通信

• 常见跨域

HTML页面中一些允许指定路径的元素具有跨域特性：
<link>元素
<script>元素
<img>元素
<iframe>元素

JSONP

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题
利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP

• <script>元素实现

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

function addScriptTag(src){
    var script=document.createElement('srcipt');
    script.setAttribute('type','text/javascript');
    script.src=src;
    document.body.appendChild(script);
}
window.onload=function(){
    addScriptTag('http://127.0.0.1:3000?callback=foo');
}

function foo(data){
    console.log('Your public IP address is:'+data.ip);
}

• $.getJSON()方法

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

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

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