一文读懂JSONP道理

跨域

为何会涌现跨域?

  • 由于浏览器有同源战略的限定,同源战略是浏览器最中心最基本的安全战略。
  • 端口,协定,域名,有一者差别就会涌现跨域的题目。

处理跨域的体式格局

  1. JSONP
  2. CORS

JSONP如何处理跨域?

所谓的JSONP处理跨域题目就是前端在适宜的时代动态增加一个<script>标签,要求后端给的接口带上一个回调函数。

由于<script>标签不受浏览器同源战略的限定。

手摸手带你解开JSONP的道理

完成JSONP跨域和JSONP道理的几步

**前端**
  1. 前端先定义一个回调函数
<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>

后端

  1. 开启一个接口效劳
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道理》

JSONP道理就是这里简朴

–end–

    原文作者:yuefengsu
    原文地址: https://segmentfault.com/a/1190000019095884
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞