Node.js返回JSONP详解

一、什么是JSONP?

JSONP是一种跨域访问数据的方式，它通过动态生成script标签，将请求发送到跨域地址上，跨域地址返回一段特定格式的JavaScript代码，调用一个回调函数，将数据作为参数传递给该函数。由于script标签不受同源策略的限制，因此可以轻松实现跨域请求数据的功能。

二、JSONP的实现原理

创建script标签，将请求发送至跨域地址

返回一段调用回调函数的JavaScript代码，数据做为参数

三、Node.js如何实现JSONP请求

1. 安装express模块

npm install express --save

1. 创建Node.js服务器

const express = require('express')
const app = express()
const port = 3000

app.get('/jsonp', (req, res) => {
  const data = {
      name: 'jack',
      age: 18
  }
  const callback = req.query.callback; //接收回调函数名

  const jsonpStr = `${callback}(${JSON.stringify(data)})`//拼接jsonp字符串

  res.send(jsonpStr);
})

app.listen(port, () => {
  console.log(`The server is running on http://localhost:${port}`)
})

1. 发送JSONP请求

<script>
    function myCallback(data){
        alert(data.name + '-' + data.age);
    }

    const script = document.createElement('script');
    script.type ='text/javascript';
    script.src = 'http://localhost:3000/jsonp?callback=myCallback';
    document.body.appendChild(script);
</script>

四、示例说明

1. 简单的jsonp示例

接收端服务地址：

app.get('/jsonp', (req, res) => {
  const data = {
      name: 'jack',
      age: 18
  }
  const callback = req.query.callback; //接收回调函数名

  const jsonpStr = `${callback}(${JSON.stringify(data)})`//拼接jsonp字符串

  res.send(jsonpStr);
})

客户端请求：

<script>
    function myCallback(data){
        alert(data.name + '-' + data.age);
    }

    const script = document.createElement('script');
    script.type ='text/javascript';
    script.src = 'http://localhost:3000/jsonp?callback=myCallback';
    document.body.appendChild(script);
</script>

1. 利用jsonp获取其他域名下的数据

接收端服务地址：

app.get('/jsonp', (req, res) => {
  const url=`http://gank.io/api/today`; //获取gank.io今日推荐的api
  const callback = req.query.callback; //接收回调函数名
  const jsonpStr = `${callback}(${JSON.stringify(data)})`//拼接jsonp字符串

  http.get(url,(sres)=>{
      let rawData = '';

      sres.on('data', (chunk) => {
        rawData += chunk;
      });
      sres.on('end', () => {
        const data = JSON.parse(rawData);
        res.send(jsonpStr); // 发送jsonp数据
      });
  });
})

客户端请求：

 <script>
    function myCallback(data){
        console.log(data);
    }

    const script = document.createElement('script');
    script.type ='text/javascript';
    script.src = 'http://localhost:3000/jsonp?callback=myCallback';
    document.body.appendChild(script);
</script>

以上示例展示了如何利用JSONP在跨域的情况下获取数据。通过以上步骤，您应该可以自己实现JSONP，这是Web前端工程师不可缺少的技能之一。