实现跨域访问

长风破浪会有时，直挂云帆济沧海。————《行路难·其一》李白

实现跨域访问

跨域访问是什么

同源策略

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

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

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

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

域名是什么

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

访问的URL地址：网络协议 + 域名( IP 地址) + 端口号 + 资源路径

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

跨域是什么

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

出于安全原因，浏览器限制从脚本内发起的跨源 HTTP 请求。例如， XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源。

常见跨域分为以下两种：

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

常见跨域

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

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

用法如下所示：

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<img src="https://developersummit.googlecnapps.cn/static/assets/teasers/day-1-cn.jpg">

JSONP

JSONP 是什么

JSONP（JSON with Padding）是 JSON 的一种 “ 使用模式 ”，可用解决主流浏览器的跨域数据访问的问题

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

<script> 元素实现

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

function addScriptTag(src) {
    var script = document.createElement('script');
    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 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 将 “ ? ” 自动替换为正确的函数名，以执行回调函数。