一文读懂JSONP原理

jiezi

6 年前

为什么会出现跨域？

因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。
端口，协议，域名，有一者不同就会出现跨域的问题。

JSONP
CORS

所谓的 JSONP 解决跨域问题就是前端在合适的时期动态添加一个 <script> 标签，请求后端给的接口带上一个回调函数。

因为 <script> 标签不受浏览器同源策略的限制。

实现 JSONP 跨域和 JSONP 原理的几步

** 前端 **

前端先定义一个回调函数

<script type="text/javascript" charset="utf-8">
    function callback(data){console.log(data)
    }
</script>

2. 在合适的阶段通过 <script> 标签请求后端给出的地址带上 callback 回调参数

<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>

后端

开启一个接口服务

var express = require('express');

var app = express();

app.get('/',function(req,res,next){res.end("ok")
})

app.listen(3000,function(){console.log('JSONP')
    
})

2. 等前端请求接口的时候，获取请求的参数的回调

app.get('/',function(req,res,next){var callback = req.query.callback;})

3. 最后后端把所需的数据放到获取到的回调函数参数内，返回给前端（返回的是字符串），浏览器会把它解析为 js 执行

app.get('/',function(req,res,next){
    
    var callback = req.query.callback;
    // 模拟所需的数据
    var data = {
                err_ok:0,
                message:"请求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

最终后端代码

var express = require('express');

var app = express();

app.get('/',function(req,res,next){
    
    var callback = req.query.callback;
    // 模拟所需的数据
    var data = {
                err_ok:0,
                message:"请求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

app.listen(3000,function(){console.log('JSONP')
    
})

最终前端的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
            function callback(data){console.log(data)
            }
        </script>
        <script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

前端接收到的结果

JSONP 原理就是这里简单

–end–

一文读懂JSONP原理

跨域

解决跨域的方式

JSONP 怎样解决跨域？

手摸手带你解开 JSONP 的原理