JSONP 概念
JSONP 是 JSON with Padding 的简称，JSONP 为民间提出的一种跨域解决方案，通过客户端的 script 标签（不受同源策略限制）发出的请求方式。
同源策略
同源是指域名，协议，端口都相同，只要其中一个不同，则为跨域。
JSONP 实现
JSONP 流程
1、在发请求前，准备一个全局的接收函数
window.myCallback = (res)=>{ // 声明一个全局函数 'myCallback'，用于接收响应数据
console.log(res,"接收数据！")
}
2、在 html 创建 script 标签，发送请求
<html>
...
<script>
window.myCallback = (res)=>{ // 这里为上一步定义的全局函数
console.log(res)
}
</script>
<script src="xxx?callback=myCallback">
// script标签的请求必须在写在定义全局函数之后
// 这里需将全局函数的函数名作为参数callback的value传递
// 这里callback这个键名是前后端约定好的
</script>
...
</html>
3、服务端接收到请求，将如下数据返回
myCallback({
name:"leo",
age:18
})
4、客户端接收到服务端返回信息，相当于
<html>
...
<script>
window.myCallback = (res)=>{ // 这里为上一步定义的全局函数
console.log(res,"接收数据！")
}
</script>
<script>
// 将接收到的数据作为script标签里面的内容展开执行
myCallback({
name:"leo",
age:18
})
</script>
...
</html>
5、控制台输出
JSONP 测试
启动一个项目，端口为 8080，启动一个服务器，端口为 3000。
在项目中直接调用（不做其他跨域配置，如代理服务器等）
this.$axios.get('http://localhost:3000/index?callback=myCallback').then(res => {
console.log(res)
})
报错，跨域了！
使用 JSONP 解决跨域！！！
服务器配置
此时返回：
myCallback({
name:"leo",
age:18
})
全局函数执行，控制台输出
搞定，收工！
本文转载自: https://blog.csdn.net/qq_41809113/article/details/126354371
版权归原作者 前端不释卷leo 所有， 如有侵权，请联系我们删除。
版权归原作者 前端不释卷leo 所有， 如有侵权，请联系我们删除。