13-利用jsonp解决Ajax跨域问题

1. 跨域问题

• 浏览器同源策略

• 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源；

• 源 ：协议、域名和端口号；

• ajax无法跨域

2. jsonp

• JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题；
• 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外；
• 利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP；
• 用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析

2-1. 动态创建script实现请求

• 请求

<script>
let btn = document.querySelector("button");

// 根据响应输出服务器传的参
function cbfn(res){
    
    console.log(res);
}

btn.onclick = function(){
    
    let o = document.createElement('script');
    o.src = "http://localhost:4000/getAjax?cb=cbfn";
    document.querySelector("head").appendChild(o);
}

</script>

• 响应

router.get("/getAjax",(ctx,next)=>{
   
    console.log("4000 run ");
    let cb = ctx.query.cb;
    let obj = {
   
        a:20,
        b:10
    }