跨域的原理
跨域：是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本早歇。它是由瀏覽器的同源策略造成的焰檩，是瀏覽器對(duì)javascript實(shí)施的安全限制憔涉，那么只要協(xié)議、域名析苫、端口有任何一個(gè)不同兜叨，都被當(dāng)做是不同的域。跨域原理就是通過(guò)各種方式衩侥，避開(kāi)瀏覽器的安全限制国旷。
同源策略
同源策略是一種約定，它是它是瀏覽器最核心也最基本的安全功能茫死，如果缺少了同源策略跪但，則瀏覽器的正常功能可能都會(huì)受到影響÷臀可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的屡久，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。同源策略會(huì)阻止一個(gè)域的javascript腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互爱榔。所謂同源（即指在同一個(gè)域）就是兩個(gè)頁(yè)面具有相同的協(xié)議（protocol）被环，主機(jī)（host）和端口號(hào)（port）。
解決跨域的方法
- CORS
CORS是跨域資源分享（Cross-Origin Resource Sharing）的縮寫详幽。它是W3C標(biāo)準(zhǔn),屬于跨源 AJAX 請(qǐng)求的根本解決方法蛤售。
服務(wù)器端設(shè)置Access-Control-Allow-Origin
原生ajax：
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
jQuery ajax:
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
dataType: 'jsonp', // 請(qǐng)求方式為jsonp
jsonpCallback: "handleCallback", // 自定義回調(diào)函數(shù)名
data: {}
});
Vue.js
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
- JSONP跨域
jsonp的原理就是利用<script>標(biāo)簽沒(méi)有跨域限制，通過(guò)<script>標(biāo)簽src屬性妒潭，發(fā)送帶有callback參數(shù)的GET請(qǐng)求，服務(wù)端將接口返回?cái)?shù)據(jù)拼湊到callback函數(shù)中揣钦，返回給瀏覽器雳灾，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)冯凹。
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參一個(gè)回調(diào)函數(shù)名給后端谎亩，方便后端返回時(shí)執(zhí)行這個(gè)在前端定義的回調(diào)函數(shù)
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);
// 回調(diào)執(zhí)行函數(shù)
function handleCallback(res) {
alert(JSON.stringify(res));
}
</script>
