JSONP 原理

Naomi ·

更新时间:2024-09-21

· 526 次阅读

JSONP

是一种需要后端配合的跨域请求解决方案

基于浏览器的同源策略
如果你在发送ajax请求资源时 (协议,域名,端口),
只要有一个和你的本域不同就会被认为是在进行跨域请求
发生跨域请求时,服务端response的数据会被浏览器拦截住解决跨域请求的方法有很多种,jsonp就是其中一种

原理就是:
1.通过html元素标签上的 src 属性请求到的资源不会被认为是跨域的
2.script 标签请求到的JS文件资源会被立即执行就是写的变量啊,方法啊,都会被立马定义出来或者执行了

那么就可以上代码了:


    Document
        let jsonp =  document.createElement('script');
        //定义一个script 标签
        jsonp.src = 'http://baidu.com?callback=abc'
        //要发送请求的地址 加上一个参数 callback 带上一个定义好的函数名
	/**
	**此时后端已经收到了get 请求 已经你发送的 callback 函数名就可以进行字符串拼接
	比如发送的函数名是 abc 那么拼接出来的就应该是这样的
	abc({data})
	**/
        document.body.appendChild(jsonp);
    //由于这是script 发出的请求 浏览器拿到response后 就会 把它当成js文件来执行 
    //就相当于 运行了函数 abc()  并且传入了参数 data
    //所以我们需要事先定义好这个函数 
        function abc(data){
            console.log(data);
        }

JSONP的不足
1.只能发送get请求因为script 标签的特性
2.相对于直接在后端加上请求头更为繁琐

作者：Arencn.

jsonp

1024 个赞