一、同源策略限制
同源：协议、域名、端口号都相同。
同源策略限制：从一个源加载的文档或脚本与另一个源的资源进行交互。
限制：1.cookie、localstorage、indexDB不能获取；2. ajax请求不能发送；3.DOM无法获得。
二、前后端如何通信
ajax 同源、fetch、webSocket 不限制同源、CORS 支持同源、不同源
三、跨域通信
- jsonp
借助<script>标签可以加载外部资源的实现跨域，只支持get请求。
实现：
声明一个全局callback方法，用<script></script>调用外源接口，将callback作为参数返回服务端。
let script = document.createElement('script')
let url = ""
//加上回调方法好拿到数据
script.src = `${url}?callback=cb`
//添加这个脚本到文档里去
document.head.appendChild(script)
function cb(data){
console.info("jsonp",data)
}
- iframe的hash：把数据附属在URL的hash上。
// 在A窗口中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B(iframe)窗口中：
window.onhashchange = function () {
var data = window.location.hash;
};
- postMessage-结合iframe使用
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
window.postMessage('data', 'http://B.com');
// 在窗口B中监听
window.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--目前最常用
服务端设置Access-Control-Allow-Origin字段，标识允许请求的来源域。比如Access-Control-Allow-Origin: 'http://foo.com'，*表示允许来自任意域的请求。
设置了源，客户端就可以用ajax请求了。
