跨域

跨域的概念

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

同源

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

跨域

不同源则跨域

例如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标签发送跨域请求，并得到返回数据（回调函数）

$("#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 的区别

• jsonp 是最早期的这种跨域解决方案

  • 因为是使用script 标签发送请求，所以兼容性会比较好
  • 只支持 get方式

• cors 是后期的一种解决方案

  • 它只需要改服务器的配置，客户端不需要做任何的处理（一个响应头）
  • 兼容性稍微差一些，因为Access-Control-Allow-Origin是后期http协议规定的
  • 支持get ，以及post

• 其它方式：通过后台服务器转发，通过设置代理服务器