跨域访问
同源策略（互联网默认原则）
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。
所谓“同源”指的是“三个相同”：协议相同、域名相同以及端口相同。
域名是什么？
域名又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于 在数据传输时标识计算机的电子方位（有时也指地理位置）。
跨域
描述：当一个资源从与该资源本身所在的服务器不同的域或端口请求一个 资源时，资源会发起一个跨域 HTTP请求。出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。
常见的跨域分为以下两种：
完全跨域：就是指一个顶级域名方向另一个顶级域名。
跨子域：相同顶级域名下的两个子级域名相互通信。
常见的跨域访问
HTML页面中一些允许指定路径的元素具有跨域特性：
<link>元素
<script>元素
<img>元素
<iframe>元素
常见的跨域访问示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常见跨域访问</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3238475290,1513931108&fm=26&gp=0.jpg"> <script> console.log($); </script> </body> </html>
JSONP
概述
JSONP是JSON的一种“使用模式“，可以用来解决主流浏览器的跨域数据访问的问题。
利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。
<script>元素实现跨域访问
网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传出来。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>script元素实现JSONP跨域</title> </head> <body> <!-- 通过<script>元素实现JSONP跨域访问 * 利用<script>元素的src属性指定服务器端地址 * 同时将指定的回调函数名称发送指定服务器 --> <script> // 定义发送服务器端的回调函数 - 利用参数方式进行接收 function fn(data) { console.log(data); } </script> <script src="http://127.0.0.1:3000?callback=fn"></script> </body> </html>
解析图如下：
效果图如下：
$.getJSON()方法
jQuery 中的$.getJSON()方法允许通过使用JSON形式的回调函数来嘉爱其他网络的JSON数据。
语法格式如下：
$.getJSON("http://127.0.0.1:3000?callback=?",function(data){ console.log(data); });
$.getJSON()方法的第一个参数表示url，需要在该参数后面添加“callback?”。jQuery将“?”自动替换为正确的函数名，以执行回调函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getJSON实现跨域访问</title> <script src="jquery-1.12.4.js"></script> </head> <body> <script> $.getJSON("http://127.0.0.1:3000?callback=?",function(data){ console.log(data) }); </script> </body> </html>
