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);
    }
)

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

posted @ 2020-06-02 08:05  飘逸_winxin  阅读(406)  评论(0编辑  收藏  举报