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); },
