回顾JSONP的概念与特点
概念:浏览器通过
特点:
- JSONP不属于真正的Ajax请求,因为它没有使用XMLHttpRequest这个对象。
- JSONP仅支持GET请求,不支持POST、PUT、DELETE等请求。
创建JSONP接口的注意事项
如果项目中已经配置了CORS跨域资源共享,为了防止冲突,必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。
实现JSONP接口的步骤
- 获取客户端发送过来的回调函数的名字
- 得到要通过JSONP形式发送给客户端的数据
- 根据前两部得到的数据,拼接出一个函数调用的字符串。
- 把上一步拼接得到的字符串,响应给客户端的
//必须在配置cors之前配置JSONP
app.get('/api/jsonp',(req,res)=>{
//得到函数的名称
const funcname = req.query.callback
const data = {
name:'zs',
age:22
}
const scriptStr = `${funcname}(${JSON.stringify(data)})`
res.send(scriptStr)
})