19. 基于 Node 实现 JSONP 请求
2019-06-08 本文已影响0人
璎珞纨澜
JSONP 原理
由于浏览器的安全性限制，不允许 AJAX 访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全。为了解决这种跨域限制的问题，可以通过动态创建 script 标签的形式，把 script 标签的 src 属性，指向数据接口的地址，因为 script 标签不存在跨域限制，这种数据获取方式，称作 JSONP
注意： JSONP 的实现原理，JSONP 只支持 Get 请求
JSONP 具体实现过程
- 先在客户端定义一个回调方法，预定义对数据的操作
- 再把这个回调方法的名称，通过 URL 传参的形式，提交到服务器的数据接口
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行
- 客户端拿到服务器返回的字符串之后，当做 script 脚本去解析执行，这样就能够拿到 JSONP 的数据了
服务端代码：
app.js
// 导入 http 内置模块
const http = require('http')
// 这个核心模块，能够帮我们解析 URL地址，从而拿到 pathname query
const urlModule = require('url')
// 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {
// const url = req.url
const { pathname: url, query } = urlModule.parse(req.url, true)
if (url === '/getscript') {
// 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
// var scriptStr = 'show()'
var data = {
name: 'hh',
age: 18,
gender: '女孩子'
}
var scriptStr = `${query.callback}(${JSON.stringify(data)})`
// res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
})
// 指定端口号并启动服务器监听
server.listen(3000, function () {
console.log('server listen at http://127.0.0.1:3000')
})
客户端页面：
<!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 showInfo123(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
</body>
</html>
