js-jsonp跨域请求原理以及jsonp的封装

一、为什么会产生跨域问题跨域

1. 浏览器提出了一种同源策略

   • 同服务
   • 同域名
   • 同端口

2. 当请求页面和请求地址之间没有遵守同源策略时，且请求资源没有明确表示允许，那么浏览器会阻止ajax请求

   • 不允许跨域请求数据

二、如何解决跨域问题

1. 解决跨域问题

   • 后台
     • CROS
   • 前端
     • jsonp

2. jsonp是利用script标签可以引入外部资源，并将引入的外部资源作为js代码解析的特性，获取跨域资源

   • 如果外部资源是php文件，那么php文件会自动被服务器解析，解析之后的返回的数据，会作为js执行

3. jsonp的封装

   • 动态创建script标签，设置src属性为跨域的地址，通过地址拼接数据，实现数据的发送
   • 通过在后台资源内，返回js格式的函数执行，利用函数的传参，实现跨域数据传输
   • 注意：各种参数的作用和处

// jsonp封装
function jsonp({url,data={},seccess}){
    var str = '';
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
    var d = new Date();
    var script = document.createElement('script');
    script.src = url + '?' + str + '__qft' + d.getTime();
    document.body.appendChild(script);
    window[data[data.fnName]] = function(res){
        seccess(res);
    }
}

//调用jsonp
jsonp(请求的地址,{发送数据的名字：发送数据值,发送数据的名字2：发送数据值2,.....},
    function(res){
         console.log(res);
    }
)

如果有什么问题请在评论区留言