jsonp

jsonp的核心原理就是目标页面回调本地页面的方法,并带入参数

² 服务器端实现 JSONP 接口的步骤

① 服务器端获取客户端发送过来的query参数，其中参数有回调函数的名字

② 得到的数据，拼接出一个函数调用的字符串

③ 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行

app.get(uri,(req,res)=>{

const fn = req.query.callback

const fnStr = `${fn}()`

res.send(fnStr)

})

const express = require('express')
// 引入代理模板
const router = express.Router()
// jsonp需要服务器返回一个 函数调佣形式的字符串
router.get('/web', (req, res) => {
    // 返回的给jquery的回调函数名称
    let { callback } = req.body
    res.send(`${callback}('你好世界')`)
})
module.exports = router

在网页中发起jsonp请求

// 以jquery来发起jsonp请求

$.ajax({

method: 'GET',

url,

dataType: 'jsonp',

success:res=>console.log(res)

})

第二种

<script>

function fn(age){

  console.log(age)

}

</script>

// 客户端需要传入回调函数的名称 ，需要提前定义好

<script src="http://localhost:3000/v1/web?callback=fn"></script>