原生koa2实现jsonp

前言

在项目复杂的业务场景，有时候需要在前端跨域获取数据，这时候提供数据的服务就需要提供跨域请求的接口，通常是使用JSONP的方式提供跨域接口。

实现JSONP

demo地址

https://github.com/ChenShenhai/koa2-note/blob/master/demo/jsonp/

具体原理

  2.   // 判断是否为JSONP的请求 
  3.   if ( ctx.method === 'GET' && ctx.url.split('?')[0] === '/getData.jsonp') {
  4.     // 获取jsonp的callback
  5.     let callbackName = ctx.query.callback || 'callback'
  6.     let returnData = {
  7.       success: true,
  8.       data: {
  9.         text: 'this is a jsonp api',
  10.         time: new Date().getTime(),
  11.       }
  12.     } 
  14.     // jsonp的script字符串
  15.     let jsonpStr = `;${callbackName}(${JSON.stringify(returnData)})`
  17.     // 用text/javascript，让请求支持跨域获取
  18.     ctx.type = 'text/javascript'
  20.     // 输出jsonp字符串
  21.     ctx.body = jsonpStr
  22.   }

解析原理

  • JSONP跨域输出的数据是可执行的JavaScript代码
    • ctx输出的类型应该是’text/javascript’
    • ctx输出的内容为可执行的返回数据JavaScript代码字符串
  • 需要有回调函数名callbackName，前端获取后会通过动态执行JavaScript代码字符，获取里面的数据

效果截图

同域访问JSON请求

jsonp-result-01

跨域访问JSON请求

jsonp-result-02

完整demo代码

  1. const Koa = require('koa')
  2. const app = new Koa()
  4. app.use( async ( ctx ) => {
  7.   // 如果jsonp 的请求为GET
  8.   if ( ctx.method === 'GET' && ctx.url.split('?')[0] === '/getData.jsonp') {
  10.     // 获取jsonp的callback
  11.     let callbackName = ctx.query.callback || 'callback'
  12.     let returnData = {
  13.       success: true,
  14.       data: {
  15.         text: 'this is a jsonp api',
  16.         time: new Date().getTime(),
  17.       }
  18.     }
  20.     // jsonp的script字符串
  21.     let jsonpStr = `;${callbackName}(${JSON.stringify(returnData)})`
  23.     // 用text/javascript，让请求支持跨域获取
  24.     ctx.type = 'text/javascript'
  26.     // 输出jsonp字符串
  27.     ctx.body = jsonpStr
  29.   } else {
  31.     ctx.body = 'hello jsonp'
  33.   }
  34. })
  36. app.listen(3000, () => {
  37.   console.log('[demo] jsonp is starting at port 3000')
  38. })