跨域

2019-08-10  本文已影响0人  简小园

跨域的概念

从一个站点访问一个资源,然后在这个资源当中又去访问另外的一个站点的资源,这个就是跨域。

同源

同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。

跨域

不同源则跨域

例如http://www.example.com/

http://api.example.com/detail.html 不同源 域名不同
https://www.example.com/detail.html 不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 协议、域名不同
https://www.example.com:8080/detail.html 不同源 端口、协议不同
http://www.example.com/detail/index.html 同源 只是目录不同

解决跨域

jsonp

浏览器会阻止XMLHttpRequest跨域请求
但不会阻止script标签的跨域请求

// 当前域:localhost:8080
<script src="http://www.jd.com" ></script>

创建script标签发送跨域请求,并得到返回数据(回调函数)

$("#btn").on("click",function(){
    var script = document.createElement("script");
    script.src="http://www.jd.com/jd.php?callback=getInfo";
    document.body.apendChild(script);
}
funtion getInfo(obj){
    // 得到数据
    console.log(obj);
}

应用:输入框模糊搜索

window.onload=function(){
    document.getElementById("keyword").onkeyup=function(){
        if(this.value.length>0){
            var script=document.createElement("script");
            script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+this.value;
            document.body.appendChild(script);
        }else{
            document.getElementsByClassName("area")[0].style.display="none";
        }
    }
}
function getInfo(obj){
    // 得到数据 解析到页面
    console.log(obj);
}

jsonp 的跨域,它只支持get 方式的请求,因为它是使用script 标签去发送请求,而且服务端需要做处理,客户端也需要做处理。如果跨域的时候传递的数据非常多,jsonp 的方式就不太可取。

CORS 跨域(跨域资源共享)

前端发送请求时,服务器给一个响应头,告诉客户端,这些数据可以访问

header("Access-Control-Allow-Origin:*");

jsonp 与 cors 的区别

上一篇 下一篇

猜你喜欢

热点阅读