JSONP 的原理

1. JSONP 跨域是通过动态的创建 script 标签，然后通过它本身的 src 属性，进行跨域请求的，这时候需求前后端的配合才行，前端得有一个处理数据的回调函数，然后服务器端需要配合执行回调函数，将传过来的数据放在里面，这样的话，就可以实现 JSONP 请求了。

   1. 从这里就可以看出，为啥，它 script 标签 没有受到浏览器的同源策略的限制？

      1. JSONP 是一种 非正式的跨域数据交互协议

      2. 同源策略，就是 只有 当 协议、域名、端口号，一样的时候，才是同源，然后才允许 对资源 的访问。

      3. 我看了看 MDN 上解释：同源策略的作用是 用于隔离潜在的恶意文件，它是一个重要的安全机制。它是限制了从同一个源加载的文档或脚本如何与来之另一个源的资源进行交互。

2. script 标签实现 JSONP 的原理

   1. 上面已经解释了 同源策略 啦，其实同源策略就是： 小明A（阿拉丁人），小黄B（阿巴人） 都为独立个体 不能瞎搞，得独立开来，直接访问的话，语言不通。

   2. script 标签不受 同源策略的影响 其实还得看 ，这个执行的脚本来自哪个 源 （也就是 脚本的来源是取决于脚本所嵌入的资源的来源）， 举个例子，访问 A 主机的当前 HTML 文件中会有一个 script 标签，然后这个 script 标签的 src 属性请求了，另外一个 js 脚本； 我们可以看到， 这个 请求的脚本是A主机下的 HTML 文件嵌入的 script 标签发起请求的获取的，因此从一个大的角度 来看，这个 脚本的来源是属于 A主机的，对吧，这样的话，就不会受到同源策略的影响的对吧！小伙伴.

3. 举例子

   1. 前端代码，执行一个回调函数，请求数据
       

   2. 服务器代码

      function callback(params) {
          console.log(params)
        return params
      }
      callback({
        name: '清云',
        age: 24,
        sex: '男'
      })

      这样就能实现 JSONP 请求了。

      案例链接：https://gitee.com/zeng-qin/jsonp.git

      这是案例的目录结构