2020-3-1-jsonp原理

SylvesterZhang發表於2024-03-22
JSON

原理

ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的連結卻可以訪問跨域的js指令碼，利用這個特性，服務端不再返回JSON格式的資料，而是返回一段呼叫某個函式的js程式碼，將資料作為引數，在src中進行了呼叫，這樣實現了跨域。

實現程式碼

1服務端

//nodejs
var http = require('http');
var url=require('url')
var querystring=require('querystring')
http.createServer(function (req, res) {
    let req_url=url.parse(req.url).pathname//解析出url
    let callback=querystring.parse(url.parse(req.url).query).callback//解析出客戶端傳過來的回撥函式
    let data={
        name:'zhang',
        age:'20'
    }
    data=JSON.stringify(data)//將資料序列化
    if(req_url=='/getscript'){
        res.end(`${callback}(${data})`)//將包裹資料的回撥函式返回
    }else{
        res.end("404")
    }
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');

2客戶端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function show(data){//定義回撥函式，以接收資料
        console.log(data)//{name: "zhang", age: "20"}
    }
</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script><!--透過script標籤訪問-->
<body>
    
</body>
</html>

相關文章