跨域两种解决方案CORS以及JSONP

一、CORS设置请求头

设置请求头实现跨域：

//跨域的浏览器会让请求带Origin头，表明来自哪里的跨域请求

Origin: http://xxx.example

//表明允许跨域访问

Access-Control-Allow-Origin:上面origin的地址

//其他跨域相关的请求头

Access-Control-Allow-Methods:POST,GET

Access-Control-Allow-Credentials:true

Access-Control-Allow-Headers:Origin,Content-Type,Accept,token,X-Requested-With

二、JSONP通过script标签回调函数实现跨域

原理

浏览器中对于img、script、iframe等标签不会跨域阻拦

生成script标签，利用script的src对目标地址进行访问，然后拿到数据，删除script标签，并调用回调函数

var tag = document.createElement("script");

tag.src = "http://www.xxx.com/api/v1/data/?callback=handleback&id=1717";

document.head.appendChild(tag);

document.head.removeChildren(tag);

function handleback(response, state){

    console.log("取回的数据为："+response)

}

创建一个script标签
该标签添加src属性，指向将要访问的地址
定义回调函数，标签加载完成后自动调用
将该标签添加到页面中
该标签被浏览器自动加载，调用回调函数取得数据处理
删除该标签

ajax实现跨域请求

ajax实现

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("#btn").click(function(){

            $.ajax({

                url : "https://api.douban.com/v2/book/search",

                type : "GET",

                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式

                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback

                jsonpCallback: 'handleResponse', //设置回调函数名

                data : {

                    q : "javascript",

                    count : 1

                },

                success: function(response, status, xhr){

                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);

                    console.log(response);

                }

            });

        });

    });

</script>

巴特西

跨域两种解决方案CORS以及JSONP

最新文章

热门文章