前端jsonp

##jsonp
一、创建jsonp接口注意事项：
如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明jsonp接口，否则jsonp接口会被处理成开启了CORS的接口。

二、实现步骤：
1. 获取客户端发送过来的回调函数的名字
2. 得到要通过jsonp形式发送给客户端的数据
3. 根据前两步得到的数据，拼接出一个函数调用的字符串
4. 把上一步拼接得到的字符串，响应给客户端的`<script>`标签进行解析执行

三、调用jsonp接口
使用$.ajax()函数，提供jsonp的配置选项，从而发起jsonp请求

jsonp.html如下

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>jsonp</title>
 6     </head>
 7     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 8     <body>
 9         <button id="jsonp">jsonp</button>
10         <script type="text/javascript">
11             $($('#jsonp').on('click', function(){
12                 $.ajax({
13                     type: 'GET',
14                     url: 'http://127.0.0.1/jsonp',
15                     dataType: 'jsonp',
16                     success:function(res){
17                         console.log(res)
18                     }
19                 })
20             }))
21         </script>
22     </body>
23 </html>

后端使用nodejs index.js如下

 1 const express = require('express');
 2 const app = express();
 3 const cors = require('cors');
 4 //注意需要定义子啊cors之间 jsonp只支持get请求
 5 app.get('/jsonp', (req, res) => {
 6     console.log('/jsonp');
 7     //获取克服的发送过来的回调函数的名字
 8     const funcName = req.query.callback;
 9     //得到要通过jsonp形式发送给客户端的数据
10     const data = {name: 'jsonp'};
11     //根据前两步得到的数据，凭借出一个函数调用的字符串
12     const scriptStr = `${funcName}(${JSON.stringify(data)})`;
13     //把拼接的字符串响应给客户端的`<script>`标签进行解析
14     res.send(scriptStr);
15 });
16 app.use(cors());
17 app.listen(80, () => {
18     console.log('server running at 127.0.0.1')
19 })

测试结果如下：

 

posted @ 2022-03-20 19:18  grigeorge  阅读(167)  评论(0)  编辑  收藏  举报