NodeJs 3 实现 JSONP 接口的步骤练习

程序员文章站 2022-03-15 13:29:54

获取客户端发送过来的回调函数的名字得到要通过 JSONP 形式发送给客户端的数据根据前两步得到的数据，拼接出一个函数调用的字符串把上一步拼接得到的字符串，响应给客户端的 // 导入 express 模块const express = require('express')// 创建 express 的服务器实例const app = express()// 配置解析表单数据的中间件app.use(express.urlencoded({ extended: false }))// 必....

获取客户端发送过来的回调函数的名字
得到要通过 JSONP 形式发送给客户端的数据
根据前两步得到的数据，拼接出一个函数调用的字符串
把上一步拼接得到的字符串，响应给客户端的

// 导入 express 模块
const express = require('express')

// 创建 express 的服务器实例
const app = express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

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

// 导入中间件
const cors = require('cors')
app.use(cors())

// 导入路由模块
const router = require('./020-apiRouter')
// 把路由模块，注册到 app 上
app.use('/api', router)

// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(3000, () => {
  console.log('running……')
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
  <script>
    $(function () {
      $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1:3000/api/jsonp',
        dataType: 'jsonp',
        success: function (res) {
          console.log(res)
        }
      })
    })
  </script>
</body>

</html>

本文地址：https://blog.csdn.net/weixin_49210760/article/details/110479338