一文讀懂JSONP原理

時間 2019-11-15

標籤一文讀懂 jsonp 原理欄目 JSON 简体版

原文原文鏈接

跨域

爲何會出現跨域？javascript

由於瀏覽器有同源策略的限制，同源策略是瀏覽器最核心最基礎的安全策略。
端口，協議，域名，有一者不一樣就會出現跨域的問題。

解決跨域的方式

JSONP
CORS

JSONP怎樣解決跨域？

所謂的JSONP解決跨域問題就是前端在合適的時期動態添加一個<script>標籤，請求後端給的接口帶上一個回調函數。html

由於<script>標籤不受瀏覽器同源策略的限制。前端

手摸手帶你解開JSONP的原理

實現JSONP跨域和JSONP原理的幾步java

**前端**

前端先定義一個回調函數

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

2.在合適的階段經過<script>標籤請求後端給出的地址帶上callback回調參數express

<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')
    
})

最終前端的代碼app

<!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>

前端接收到的結果