ajax发送请求,存在跨域问题;
当我们的浏览器从一个域名的网页去请求另一个域名的资源时,其中域名、端口、协议任一不同,都是属于跨域;
//页面中点击按钮,向服务端去发送请求
<button id="btn">发送ajax请求</button>
<script>
let btn = document.queryselector("btn")
//ajax发送请求,存在跨域问题;
//但是script标签的src属性是不存在跨域问题
//jsonp是利用这一个属性来解决跨域问题
//jsonp就是模拟jsonp的实现原理
function jsonp (option){
//首先创建一个script标签,然后挂在body上;
let callbackName = "wangcai"
window[callbackName] = function(data){
if(data 不等于 null){
options.success(data)
}
}
let url = option.url +'?callback'+ callbackName;
let scriptEle = document.createElement("script") ;
scriptEle.src = url ;
document.body.append(scriptEle);
}
//点击按钮向服务端发送请求
btn.onclick = function (){
jsonp ({
url:"http://127.0.0.1:3000",
success:function (data){
console.log("data",data)
},
fail:function (err){
console.log("失败了")
}
})
}
</script>
//后端代码
router.get("/",(ctx)=>{
let cb = ctx.query.callback;
//后端返回函数调用字符串
ctx.body=`${cb}(${JSON.stringfy{a:1,b:2})`
}
app.use(router.routes())