4.6JSONP接口

1.回顾JSONP的概念和特点

概念：浏览器通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用，这种请求数据的方式叫做JSONP

特点：

1. JSONP不属于真正的ajax请求，因为他没有使用xhr对象
2. JSONP仅支持GTE请求，不支持POST.DELET/、PUT请求

2.创建JSONP接口的注意事项

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之间声明JSONP的接口，否则JSONP接口会被处理成开启了CORS的接口，示例代码如下：

3.实现JSONP接口的步骤

 

 4.实现代码

// 必须在配置 cors 中间件之前，配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
    // TODO: 定义 JSONP 接口具体的实现过程
    // 1. 得到函数的名称
    const funcName = req.query.callback
    // 2. 定义要发送到客户端的数据对象
    const data = { name: 'zs', age: 22 }
    // 3. 拼接出一个函数的调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    // 4. 把拼接的字符串，响应给客户端
    res.send(scriptStr)
  })

5.测试使用jq发起JSONP请求