前端跨域之jsonp及其原理

r囧r小猫 2021-12-21 18:29 321阅读 0赞

### 文章目录 ###

*   *   *  跨域
         *  前端实现跨域方式
         *  json
         *  jsonp

### 跨域 ###

> 跨域一直是前端无法回避的问题，提到跨域就要提一下浏览器的同源策略

*  同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
 *  同源指的是：协议、域名、端口全都相同，缺一不可

<table> 
 <thead> 
  <tr> 
   <th>当前页面url</th> 
   <th>请求的url</th> 
   <th>是否跨域</th> 
   <th>原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>http://www.baidu.com</td> 
   <td>http://www.baidu.com/index.html</td> 
   <td>否</td> 
   <td>同源</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com</td> 
   <td>https://www.baidu.com/index.html</td> 
   <td>是</td> 
   <td>协议不同</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com</td> 
   <td>http://www.daibu.com/index.html</td> 
   <td>是</td> 
   <td>域名不同</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com</td> 
   <td>http://www.baidu.com:8888/index.html</td> 
   <td>是</td> 
   <td>端口不同</td> 
  </tr> 
 </tbody> 
</table>

### 前端实现跨域方式 ###

*  jsonp
 *  cors
 *  反向代理
 *  websocket
 *  window.domain
 *  postMessage
 *  iframe

### json ###

> 目前json数据格式是前后端传递数据最常用的数据格式

*  JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
 *  简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

### jsonp ###

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

*  **jsonp**是一种跨域数据交互协议，是json的一种“使用模式”。
 *  **json**是一种轻量级的数据交换格式。

> 首先我们通过Jquery的方法来实现一遍跨域请求

1.  首先我们通过JQ封装好的ajax方法请求一个接口（该接口需要跨域）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]
2.  我们查看控制台，发现需要进行跨域，并且ajax打印出了错误信息  
    ![在这里插入图片描述][20190628191527505.png]
3.  点击Network，查看该接口返回的数据是什么，发现是通过callback包裹的json数据。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]
4.  我们修改一下jq的ajax配置，通过jsonp方法请求数据，jsonpCallback的值对应着返回数据的callback，这个值是根据接口返回的数据来确定的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]
5.  刷新浏览器，查看控制台，发现已经正常获取到数据了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 3]

**原理**

> 动态创建script标签，通过script标签src属性不存在跨域问题，设置callback用于接收返回的数据

1. 事先创建好该方法用于接收返回的数据
    2. 通过js创建script标签，设置其src属性为该接口

*  js  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 4]
 *  刷新页面，查看控制台  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center][]

![在这里插入图片描述][2019062819321016.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]: /images/20211220/8a817110f0704f50904020fa363205cd.png
[20190628191527505.png]: /images/20211220/9d53e285595a48a6a7be2c59d3bc2432.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]: /images/20211220/32faa6f70c024cc8adf765ee163f0cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]: /images/20211220/65e0b7d0f14147c7a800a4815224f686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 3]: /images/20211220/a6d9b70c58a64d91a1839ce4e1275949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 4]: /images/20211220/c746aba36b23468b8a023b747880f86e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center]: /images/20211220/41d64592b7f84df180ec9ea029e7a685.png
[2019062819321016.png]: /images/20211220/b8a6b2d6575d4915a170b594d488a111.png