概念：浏览器端通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据
的方式叫做SONP。
特点：
①JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
②JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。
如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明SONP的接口。否则
JSONP接口会被处理成开启了CORS的接口。示例代码如下：
实现JSONP接▣的步骤
1获取客户端发送过来的回调函数的名字
2得到要通过JSONP形式发送给客户端的数据
3根据前两步得到的数据，拼接出一个函数调用的字符串
4把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行
const express = require('express')
const app = express()
const rou = require('./api')
const cors = require('cors')
app.get('/api/jsonp', (req, res) => {
// TODO:定义jsonp接口的具体实现过程
// 1得到函数的名称
const funcName = req.query.callback
// 2，定义要发送到客户端的对象
const data = {
name: 'zs',
age: 23
}
// 3，拼接出一个函数的调用 把data转成json的格式
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4,把拼接的字符串响应给客户端
res.send(scriptStr)
})
// 解决跨域问题
app.use(cors())
// 配置解析application/json格式
app.use(express.json())
// 配置解析application/x-www-form-urlencoded格式
app.use(express.urlencoded({ extended: false }))
app.use('/api', rou)
app.listen(8080, () => {
console.log('express serve running at http://127.0.0.1')
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>node接口测试</title>
<meta name="vierport" content="width=device-width,initial-scale=1.0" />
</head>
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<body>
<button id="jsonGet">json</button>
<script>
$(function(){
$('#jsonGet').on('click',function(){
$.ajax({
method:'GET',
url:'http://127.0.0.1:8080/api/jsonp',
dataType:'jsonp',
success:function(res){
console.log(res);
}
})
})
})
</script>
</body>
</html>
标签：web,JSONP,const,app,express,接口,jsonp,15 From： https://www.cnblogs.com/wencaiguagua/p/16854252.html