跨域的概念
從一個(gè)站點(diǎn)訪問一個(gè)資源，然后在這個(gè)資源當(dāng)中又去訪問另外的一個(gè)站點(diǎn)的資源帜篇，這個(gè)就是跨域糙捺。
同源
同源策略是瀏覽器的一種安全策略，所謂同源是指笙隙，域名洪灯，協(xié)議，端口完全相同竟痰。
跨域
不同源則跨域
| http://api.example.com/detail.html | 不同源 | 域名不同 |
|---|---|---|
| https://www.example.com/detail.html | 不同源 | 協(xié)議不同 |
| http://www.example.com:8080/detail.html | 不同源 | 端口不同 |
| http://api.example.com:8080/detail.html | 不同源 | 域名签钩、端口不同 |
| https://api.example.com/detail.html | 不同源 | 協(xié)議、域名不同 |
| https://www.example.com:8080/detail.html | 不同源 | 端口凯亮、協(xié)議不同 |
| http://www.example.com/detail/index.html | 同源 | 只是目錄不同 |
解決跨域
jsonp
瀏覽器會(huì)阻止XMLHttpRequest跨域請(qǐng)求
但不會(huì)阻止script標(biāo)簽的跨域請(qǐng)求
// 當(dāng)前域：localhost:8080
<script src="http://www.jd.com" ></script>
創(chuàng)建script標(biāo)簽發(fā)送跨域請(qǐng)求边臼，并得到返回?cái)?shù)據(jù)（回調(diào)函數(shù)）
$("#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){
// 得到數(shù)據(jù)
console.log(obj);
}
應(yīng)用：輸入框模糊搜索
window.onload=function(){
document.getElementById("keyword").onkeyup=function(){
if(this.value.length>0){
var script=document.createElement("script");
script.src="https://sug.so.#/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){
// 得到數(shù)據(jù) 解析到頁面
console.log(obj);
}
jsonp 的跨域哄尔，它只支持get 方式的請(qǐng)求假消，因?yàn)樗鞘褂胹cript 標(biāo)簽去發(fā)送請(qǐng)求，而且服務(wù)端需要做處理岭接，客戶端也需要做處理富拗。如果跨域的時(shí)候傳遞的數(shù)據(jù)非常多臼予，jsonp 的方式就不太可取。
CORS 跨域（跨域資源共享）
前端發(fā)送請(qǐng)求時(shí)啃沪，服務(wù)器給一個(gè)響應(yīng)頭粘拾，告訴客戶端，這些數(shù)據(jù)可以訪問
header("Access-Control-Allow-Origin:*");
jsonp 與 cors 的區(qū)別
-
jsonp 是最早期的這種跨域解決方案
- 因?yàn)槭鞘褂胹cript 標(biāo)簽發(fā)送請(qǐng)求创千，所以兼容性會(huì)比較好
- 只支持 get方式
-
cors 是后期的一種解決方案
- 它只需要改服務(wù)器的配置缰雇，客戶端不需要做任何的處理（一個(gè)響應(yīng)頭）
- 兼容性稍微差一些，因?yàn)锳ccess-Control-Allow-Origin是后期http協(xié)議規(guī)定的
- 支持get 追驴，以及post
其它方式：通過后臺(tái)服務(wù)器轉(zhuǎn)發(fā)械哟，通過設(shè)置代理服務(wù)器
