vue3中结合egg实现jsonp跨域请求

jsonp(egg内置的中间件)

中间件配置

// config/config.default.js
exports.jsonp = {
  callback: 'callback', // 识别 query 中的 `callback` 参数
  limit: 100, // 函数名最长为 100 个字符
};

egg中自动拼接执行传递过来的回调函数。所以不需要拼接callback函数，传递参数。直接传递即可。

// 其他框架中
async index() {
    const { ctx } = this
    const callback = ctx.query.callback
    const data = {
      username: 'zh',
      password: '123'
    }
    ctx.body = `${callback}(${data})`;
  }

// egg中
async index() {
    const { ctx } = this
    const data = {
      username: 'zh',
      password: '123'
    }
    ctx.body = data;
  }

设置访问白名单

// config.default.js
  config.jsonp = {
    callback: 'callback',
    csrf: true,
    // 设置白名单.不加端口号
    whiteList: /http:// localhost//
  }

vue3中使用jsonp

setup() {
    // jsonp解决跨域
    //动态创建script,加载数据
    const oScript = document.createElement("script");
    oScript.src = `http://localhost:7001/testjsonp?callback=getResultList`;
    document.body.appendChild(oScript);
​
    //动态创建script,执行回调脚本
    const oScript1 = document.createElement("script");
    oScript1.innerHTML = `
      function getResultList(res) {
        console.log("res", res)
      }
    `
    document.body.appendChild(oScript1);
  },