<script>
// 封装一个jsonp函数
function jsonp({url, params, callback}) {
return new Promise((resolve, reject) => {
// 定义回调函数
window[callback] = function(data) {
resolve(data)
}
const script = document.createElement('script') // 创建script标签
params = {...params, callback}
const arr = []
for(const key in params) {
if(params.hasOwnProperty(key)) { // 判断当前key是否是params对象自身的属性，有可能会是原型上的属性，所以需要判断一下
arr.push(`${key}=${params[key]}`)
}
}
url += `?${arr.join('&')}` // 拼接参数
script.async = true
script.src = url
document.body.appendChild(script)
script.onload = () => {
document.body.removeChild(script)
}
})
}
// 使用jsonp
jsonp({
url: 'http://127.0.0.1:8081/hello',
params:{id: '1'},
callback: 'hello'
}).then(res => {
console.log('res:', res)
})
</script>
其中8080为服务器端口
JSONP的实现原理：由于浏览器收同源策略的限制，网页无法通过Ajax请求非同源的接口数据，但是script标签不受浏览器同源策略的影响，可以通过src属性请求非同源js脚本。简而言之，JSONP的实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
通过如下代码可以说明所有的script标签都是共享内容的
<body>
<script>
function success(res) {
console.log(res);
}
</script>
<script>
var data = {
name: 'zs',
age: 20
};
success(data);
</script>
</body>
注意事项：JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象。
参考：https://blog.csdn.net/qq_43781887/article/details/126915580
标签：跨域,script,res,params,key,JSONP,解决 From： https://www.cnblogs.com/zj68/p/17564651.html