JSONP实现跨域请求的原理

古狼_guwolf

已于 2023-11-17 16:01:45 修改

阅读量339

点赞数 2

分类专栏：前端开发文章标签：前端 javascript 开发语言

于 2023-11-09 16:24:46 首次发布

本文链接：https://blog.csdn.net/weixin_45620943/article/details/134312398

版权

前端开发专栏收录该内容

53 篇文章 2 订阅

订阅专栏

1. 前言

JSONP英文全称JSON with Padding，是JSON的一种使用方式，用来解决浏览器跨域请求数据问题。由于浏览器同源策略，即发起请求的接口地址中“协议、IP（域名）、端口”，与网页服务器地址中“协议、IP（域名）、端口”，有任何一项不同，请求会被浏览器拦截。简单点说，位于https://test.example.com的网页无法与不是https://test.example.com的服务器交换数据。

但是，HTML的 <script> 元素是个例外。浏览器解析HTML文档，当解析到<script>元素的src属性时，会触发一个GET请求，而浏览器不检查src属性值的URL与网页服务器地址是否同源，利用这个漏洞（姑且认为是漏洞吧），服务端可以将JSON数据组装成JS文件流返回给网页。而只是简单的返回JSON数据还不行，需要网页一个已经加载到浏览器内存的JS函数callback（就是padding部分啦），用来接收JSON数据。浏览器接收到JS文件流，JS解释器执行解析，完成callback函数的执行。

2. 网页部分的逻辑

添加了一个<script>元素，并构造了URL http://127.0.0.1:3000/api/jsonp?func_name=callback，将函数名callback以查询参数的方式传递给服务端。

<!DOCTYPE html>
<html>
    <head>
        <title>JSONP</title>
    </head>
    <body>
        <script>
            function callback(result) {
                console.log(result);
            }
        </script>
        <script  src="http://127.0.0.1:3000/api/jsonp?func_name=callback"></script>
    </body>
</html>

3. 服务端的逻辑

从URL查询参数?func_name=callback解析出js函数名变量func_name（值为callback）；
将数据data组装成json字符串化，拼接上callback
写入http响应

以下是伪代码，其他语言实现方式均类似。

const response_data = func_name + '(' + JSON.stringify(data) + ')';
// 即response_data为'callback({error_code: 0, error_message: "", data: {}})'
// JS解释器解析'callback({error_code: 0, error_message: "", data: {}})'
// 会执行callback({error_code: 0, error_message: "", data: {}})
// 也就将数据传给callback函数

4. JSONP的局限性

由JSONP 是通过<script>标签的 src 属性，实现跨域获取数据，仅支持 GET请求，不支持 POST 请求；
JSONP是通过<script>触发的GET请求，和ajax无半毛钱关系，JSONP请求数据的方式不能叫做 ajax，因为它没有使用xhr发送请求（xhr，即XMLHttpRequest实例化对象）。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~

古狼_guwolf

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JSONP实现跨域请求的原理

JSONP英文全称JSON with Padding，是JSON的一种使用方式，用来解决浏览器跨域请求数据问题。由于浏览器同源策略，即发起请求的接口地址中“协议、IP（域名）、端口”，与网页的Web服务器地址中“协议、IP（域名）、端口”，有任何一项不同，请求会被浏览器拦截。简单点说，位于https://test.example.com的网页无法与不是https://test.example.com的服务器交换数据。但是，HTML的元素是个例外。
复制链接

扫一扫

专栏目录