JSONP 的原理

最新推荐文章于 2023-05-12 16:16:52 发布

清云随笔

最新推荐文章于 2023-05-12 16:16:52 发布

阅读量9.7k

点赞数 1

本文链接：https://blog.csdn.net/zq18877149886/article/details/119641504

版权

JSONP 跨域是通过动态的创建 script 标签，然后通过它本身的 src 属性，进行跨域请求的，这时候需求前后端的配合才行，前端得有一个处理数据的回调函数，然后服务器端需要配合执行回调函数，将传过来的数据放在里面，这样的话，就可以实现 JSONP 请求了。
1. 从这里就可以看出，为啥，它 script 标签没有受到浏览器的同源策略的限制？
  1. JSONP 是一种 非正式的跨域数据交互协议
  2. 同源策略，就是只有当 协议、域名、端口号，一样的时候，才是同源，然后才允许对资源的访问。
  3. 我看了看 MDN 上解释：同源策略的作用是用于隔离潜在的恶意文件，它是一个重要的安全机制。它是限制了从同一个源加载的文档或脚本如何与来之另一个源的资源进行交互。
script 标签实现 JSONP 的原理
1. 上面已经解释了同源策略啦，其实同源策略就是：小明A（阿拉丁人），小黄B（阿巴人）都为独立个体不能瞎搞，得独立开来，直接访问的话，语言不通。
2. script 标签不受同源策略的影响其实还得看，这个执行的脚本来自哪个源（也就是脚本的来源是取决于脚本所嵌入的资源的来源），举个例子，访问 A 主机的当前 HTML 文件中会有一个 script 标签，然后这个 script 标签的 src 属性请求了，另外一个 js 脚本；我们可以看到， 这个请求的脚本是A主机下的 HTML 文件嵌入的 script 标签发起请求的获取的，因此从一个大的角度来看，这个脚本的来源是属于 A主机的，对吧，这样的话，就不会受到同源策略的影响的对吧！小伙伴.

举例子

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP 实现跨域</title>
</head>
<body>
  <script>
    window.callback = function() {
      console.log('data', data)
    }
  </script>
  <!-- 这里的话，你先试着 直接在地址栏上输入 js 文件的路径，看能不能运行，放在 url 上看看能不能访问，可以话，就大功告成了 -->
  <script src="file:///C:/Users/ZQ/Desktop/%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.js"></script>
</body>
</html>

服务器代码

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

这样就能实现 JSONP 请求了。

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

这是案例的目录结构

清云随笔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSONP 的原理

JSONP 跨域是通过动态的创建 script 标签，然后通过它本身的 src 属性，进行跨域请求的，这时候需求前后端的配合才行，前端得有一个处理数据的回调函数，然后服务器端需要配合执行回调函数，将传过来的数据放在里面，这样的话，就可以实现 JSONP 请求了。从这里就可以看出，为啥，它 script 标签没有受到浏览器的同源策略的限制？ JSONP 是一种非正式的跨域数据交互协议同源策略，就是只有当协议、域名、端口号，一样的时候，才是同源，然..
复制链接

扫一扫