跨域之jsonp（原生js封装jsonp）

• 跨域解决方法二（CORS）
• 跨域解决方法三（代理服务）

浏览器同源策略

• 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
• 源 ：协议、域名和端口号
• 同源： 相同的协议，相同的域名，相同的端口

跨域

• 当请求url与的协议、域名、端口三者之间任意一个与当前页面url不同，即为跨域。

跨域造成的问题：

• 无法向非同源地址发送ajax请求；
• 无法接触非同源网页的DOM；
• 无法读取非同源网页的cookie、localStorage、IndexDB

跨域解决 方法一

jsonp

原理

• <script src="..."></script>，<img>，<link>，<iframe>不存在跨域问题。即通过script标签可以引入不是同源的资源。
• 如：script引入vue的cdn，其实就是在访问别的服务，但是script标签引入不存在跨域。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 如：img的src引入网络图片地址

<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" alt="">

• 如：通过script就可以访问本地服务另一个端口的服务

<script src="http://localhost:4000/getAjax?name=张三"></script>

• 前端通过添加script标签，向服务器发送json数据，服务器收到请求，将返回数据放在指定名字的回调函数的参数位置返给前端。

jsonp解决跨域存在的问题

• 只适用于get请求，不支持post请求
• 存在安全问题，用jsonp可获取其他服务器资源

jsonp的封装

function ajax(options) {
    let opts = Object.assign({
        method: 'get',
        url: '',
        headers: {
            'content-type': 'application/x-www-form-urlencoded'
        },
        jsonp: "cb",
        data: '',
        success: function () { }
    }, options)
    //处理jsonp请求；
    if (opts.dataType === "jsonp") {
        jsonpFn(opts.url, opts.data, opts.jsonp, opts.success);
        return false;
    }
    function jsonpFn(url, data, cbName, cbFn) {
        // cbName   cb/callback
        let fnName = "KKB_" + Math.random().toString().substr(2);
        window[fnName] = cbFn;
        let path = url + "?" + o2u(data) + "&" + cbName + "=" + fnName;
        // console.log(path);
        let o = document.createElement("script");
        o.src = path;
        document.querySelector("head").appendChild(o);
    }
    let xhr = new XMLHttpRequest();
    if (options.method == "get") {
        let data = o2u(opts.data)
        options.url = options.url + "?" + data;
    }
    xhr.open(options.method, options.url, true);
    for (let key in opts.headers) {
        xhr.setRequestHeader(key, opts.headers[key]);
    }
    let sendData;
    switch (opts.headers['content-type']) {
        case 'application/x-www-form-urlencoded':
            sendData = o2u(opts.data);
            break;
        case 'application/json':
            sendData = JSON.stringify(opts.data);
            break;
    }
    xhr.onload = function () {
        let resData;
        if (xhr.getResponseHeader("content-type").includes("xml")) {
            resData = xhr.responseXML;
        } else {
            resData = JSON.parse(xhr.responseText);
        }
        options.success(resData);
    }
    if (options.method == "get") {
        xhr.send();
    } else {
        xhr.send(sendData);
    }
}
function o2u(obj) {
    let keys = Object.keys(obj);
    let values = Object.values(obj);
    return keys.map((v, k) => {
        return `${v}=${values[k]}`;
    }).join("&");
}

调用jsonp

• 本地服务跨域

btn.onclick = function () {
    ajax({
    	//端口引起跨域
        url: "http://localhost:4000/getAjax",
        data: {
            name: "张三",
            age: 20
        },
        dataType: "jsonp",
        jsonp: "callback",
        success: function (res) {
            console.log(res)
        }
    })
}

• 访问线上服务

document.querySelector(".myinput").onblur = function(){
    ajax({
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        dataType:"jsonp",
        data:{
            wd:this.value
        },
        jsonp:"cb",
        success:function(res){
            let data = res.s;
            console.log(data);
        }
    })
}