JSONP 在过去是服务器与客户端跨域通信的常用方法，接下来简述做法，并使用 Node 进行演示。
做法
第一步
网页添加一个 <script> 元素，向服务器请求一个脚本，这不受同源政策限制，可以跨域请求。
<script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>
注意，请求脚本网址有一个 callback 参数（?callback=getJsonpData），用来告诉服务器，客户端的回调函数名称（getJsonpData）。
第二步
服务器收到请求后，拼接一个字符串，将 JSON 数据放在函数名里面，作为字符串返回（getJsonpData({...})）。
response.send(`${
callback}(${
JSON.stringify(data)})`)
第三步
客户端将服务器返回的字符串作为代码进行解析。这时，客户端只要定义了 getJsonpData 函数，就能在函数体内拿到服务器返回的 JSON 数据。
演示及完整代码
Node 代码
const express = require('express')
const app = express()
app.get('/jsonpTest', (request, response) => {
const data = {
name: 'qiuzi',
age: 5,
city: 'guangzhou'
}
// 获取请求中的回调函数名称
const callback = request.query.callback
// 通过返回 callback(JSON.stringify(data)) 触发客户端的回调函数执行
response.send(`${
callback}(${
JSON.stringify(data)})`)
})
const server = app.listen(8082, () => {
console.log('---------- Server is listening on port 8082 -----------')
})
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Demo</title>
</head>
<body>
<h1>JSONP Demo</h1>
<script>
function getJsonpData(data) {
console.log('data: ', data)
}
</script>
<script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>
</body>
</html>