同源策略及限制
1会涎、先來說說什么是源
? 源（origin）就是協(xié)議、域名和端口號舒帮。
以上url中的源就是：http://www.company.com:80
若地址里面的協(xié)議会喝、域名和端口號均相同則屬于同源。
以下是相對于 http://www.a.com/test/index.html 的同源檢測
? http://www.a.com/dir/page.html ----成功
? http://www.child.a.com/test/index.html ----失敗玩郊，域名不同
? https://www.a.com/test/index.html ----失敗肢执，協(xié)議不同
? http://www.a.com:8080/test/index.html ----失敗，端口號不同
2.什么是同源策略译红？
同源策略是瀏覽器的一個(gè)安全功能预茄，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源侦厚。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報(bào)錯(cuò)的耻陕。
? 不受同源策略限制的：
1拙徽、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的诗宣。
2膘怕、跨域資源的引入是可以的。但是js不能讀寫加載的內(nèi)容梧田。如嵌入到頁面中的<script src="..."></script>淳蔼，<img>，<link>裁眯，<iframe>等。
前后端如何通信
- Ajax 支持同源通信
- WebSocket 不受同源策略影響
- CORS 既支持同源通信也支持跨域通信
如何創(chuàng)建ajax
- XMLHttpResquest 對象的工作流程
- 兼容性處理
- 事件的觸發(fā)條件
- 事件的觸發(fā)順序
util.json = function (options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function () {},
error: function () {},
};
util.extend(opt, options);
if (opt.url) {
var xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k]);
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
res = JSON.parse(res);
opt.success.call(xhr, res);
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
};
}
};
跨域通信的幾種方式
- JSONP
util.jsonp = function (url, onsuccess, onerror, charset) {
var callbackName = util.getName('tt_player');
window[callbackName] = function () {
if (onsuccess && util.isFunction(onsuccess)) {
onsuccess(arguments[0]);
}
};
var script = util.createScript(url + '&callback=' + callbackName, charset);
script.onload = script.onreadystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = script.onreadystatechange = null;
// 移除該script的 DOM 對象
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// 刪除函數(shù)或變量
window[callbackName] = null;
}
};
script.onerror = function () {
if (onerror && util.isFunction(onerror)) {
onerror();
}
};
document.getElementsByTagName('head')[0].appendChild(script);
};
- Hash
// 在A中偽代碼如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的偽代碼如下
window.onhashchange = function () {
var data = window.location.hash;
};
- postMessage
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)發(fā)送信息
Bwindow.postMessage('data', 'http://B.com');
// 在窗口B中監(jiān)聽
Awindow.addEventListener('message', function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);
- WebSocket
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log('Connection closed.');
};
- CORS
// CORS【參考資料】http://www.ruanyifeng.com/blog/2016/04/cors.html
// url（必選）讳癌，options（可選）
fetch('/some/url/', {
method: 'get',
}).then(function (response) {
}).catch(function (err) {
// 出錯(cuò)了穿稳，等價(jià)于 then 的第二個(gè)參數(shù)，但這樣更好用更直觀
});
