跨域的概念
从一个站点访问一个资源，然后在这个资源当中又去访问另外的一个站点的资源，这个就是跨域。
同源
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
跨域
不同源则跨域
| 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 的区别
-
jsonp 是最早期的这种跨域解决方案
- 因为是使用script 标签发送请求，所以兼容性会比较好
- 只支持 get方式
-
cors 是后期的一种解决方案
- 它只需要改服务器的配置，客户端不需要做任何的处理（一个响应头）
- 兼容性稍微差一些，因为Access-Control-Allow-Origin是后期http协议规定的
- 支持get ，以及post
其它方式：通过后台服务器转发，通过设置代理服务器
