jsonp跨域原理

最新推荐文章于 2022-12-26 19:58:49 发布

laumlin

最新推荐文章于 2022-12-26 19:58:49 发布

阅读量595

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_39147099/article/details/84566535

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是同源政策？

“同源”是指“三个相同”：

协议相同
域名相同
端口相同

目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制范围

目前，如果非同源，共有三种行为受到限制。

(1) 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
(2) 无法接触非同源网页的 DOM。
(3) 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。

jonsp跨域的原理

我们知道，页面上有三种资源是可以与页面本身不同源的：

js脚本
css样式文件
img

它们是可以链接访问到不同源的资源的。

当链接的资源到达浏览器时，浏览器会根据他们的类型采取不同的处理方式，如果是css文件，会对页面进行repaint或reflow；如果是图片，则会将图片渲染出来；如果是srcipt脚本，则会执行脚本。

而JSONP就是利用<script>标签可以链接到不同源的js脚本来达到跨域目的。

script、link、img等标签引入资源，都是get请求，那么就决定了JSONP一定是get方式的。

demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsonp跨域</title>
</head>
<body>
  <script type="text/javascript">
    function addScript (src) {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = src
      document.body.appendChild(script)
    }

    function getData (data) {
    	console.log(data) // {name: "Laumlin", url: "www.laumlin.com"}
    }

    window.onload = function () {
    	addScript('data.json?callback=getData')
    }
  </script>
</body>
</html>

// data.json
getData({
	"name": "Laumlin",
	"url": "www.laumlin.com"
})

总结

JSONP的原理：利用 script标签的 src属性进行跨域请求，服务器响应函数调用传参。

laumlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域原理

什么是同源政策？“同源”是指“三个相同”：协议相同域名相同端口相同目的同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。限制范围目前，如果非同源，共有三种行为受到限制。(1) 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。(2) 无法接触非同源网页的 DOM。(3) 无法向非同源地址发送 AJAX 请求（可以发...
复制链接

扫一扫