Jsonp的实现原理

作者: 最爱喝龙井 | 来源:发表于2019-08-13 09:21 被阅读0次

day02-vuejs-vue-resource实现get, p
遇到的面试题
JSONP的历史方案和实现原理
跨域方案
跨域
JSONP实现原理
JSONP
手写一个JSONP(promise封装)
Jsonp的实现原理
JSONP原理

1. Jsonp

Jsonp: 主要是用来获取跨域的请求，由于同源策略的限制，我们不能获取跨域的资源

2. Jsonp的实现原理

由于script不受同源策略的限制，因此我们可以通过动态创建script标签来获取跨域的资源

3. Jsonp的具体实现

客户端代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function showscript(data) {
            console.log('hello world');
            console.log(data);
            console.log(data.name)
        }
    </script>
    <script src="http://localhost:8080/getSome?callback=showscript"></script>
</body>
</html>

我们定义了一个script标签，src属性指向的是我们后端定义好的接口，callback=showscript表示的是我们前端定义的方法的名称传给后端，后端可以解析出来调用，防止写死

node后端代码，如下

const http = require('http');
const urlModel = require('url');

let server = http.createServer();

server.on('request', function(req, res) {
    var url = req.url;
    var obj = urlModel.parse(url, true);
    var data = {
        name: 'jason',
        age: 18,
        gender: 'male'
    }
    if(obj.pathname == '/getSome') {
        var str = `${obj.query.callback}(${JSON.stringify(data)})`
        res.end(str);
    }
})
server.listen(8080, function() {
    console.log('running...')
})

最终控制台输出，如下：

image.png