js----jsonp跨域

1.为什么会跨域:

因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。

2.什么是同源策略:

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
简单的来说:协议、IP、端口三者都相同，则为同源

3.跨域的解决办法

1.jsonp

2.后端设置 cros

3.webpack配置项  proxyTable

4.node的第三方模块  http-proxy-middleware

jsonp

方法1：

<script>
    //动态创建script标签
    var script = document.createElement("script");
    script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=fn1";
   
    document.querySelector("head").appendChild(script);

    //请求成功的回调函数
    function fn1(data){
        console.log(data)
    }
</script>

方法2：

 $.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function (data) {
        console.log(data);
    });

方法3：

 $.ajax({
        //请求地址
        url: "https://api.douban.com/v2/book/search", 
        //请求方式
        type: "GET", 
        // 返回的数据类型，设置为JSONP方式
        dataType: "jsonp", 
        //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback，默认callback
        jsonp: 'callback', 
        //设置回调函数名(自定义)
        jsonpCallback: 'handleResponse', 
        //传递的值
        data: { 
            q: "javascript",
            count: 1
        },
        //请求成功
        success: function (data) {
            //请求的数据

        }
    });

猜你喜欢