跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域；
前端碰上跨域的问题应该算是十分常见，比如地址映射，访问外部网路接口等等，而且面试中常常会问到这个，所以做下总结：
1、浏览器有一个同源策略，其一是不能通过ajax的方法去请求不同源中的文档。其二是浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法；
理解：不同域的文档以及js，你可以获取这个对象，但是你无法确定对象中的元素以及方法
解决：
document.domain跨域 - iframe ：
在当前页（a.xxx.com）的js与iframe（b.xxx.com）的js中用document.domain设置同一个域名（xxx.com），这样两个页面就属于同样一个域名下，可以进行相互调用
缺点：两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
2、hash： URL有一部分被称为hash（就是#号及其后面的字符）-浏览器锚点定位，修改这个部分会产生浏览器历史记录，但是不影响请求发送
location.hash跨域 - iframe：
（1）父传子：
修改iframe中src的#后缀，在iframe中监听#后缀变化获取
（2）子传父：
在iframe中新增一个iframe，域名为父级的域名，然后通过parent修改#后缀：
parent.parent.location.hash = self.location.hash.substring(1)
缺点：数据直接暴露在了url中；数据容量和类型都有限
注意：IE、chrome的安全机制无法修改parent.location.hash，需要parent.location.hash = 'data'来try catch判断是否可以执行
3、postMessage跨域：
使用方法：
父级使用： otherWindow.postMessage(message, targetOrigin);
iframe.contentWindow.postMessage('xxx', 路径)
otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围
子级使用：window.addEventListener(“message”, function(event){})
event.data : 是传递过来的数据
event.origin : 是调用postMessage方法的窗口的源URL（包括协议、域名、端口号）
event.source : 是发送消息的窗口对象
注意：要确定iframe创建完毕后加入监听，否则可能监听不到传递的信息；如果iframe中的同源页面需要使用可以在子页面中把数据存入缓存
4、jsonp跨域：
适用：单纯获取不同源网页的数据
<script src="xxx?callback=方法名"></script>
如上，jsonp时通过script导入时的回调函数进行数据获取的
$.getJSON('xxx?callback=?,function(jsondata)'){
//处理获得的json数据
})
query会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁-实际上就是起一个临时代理函数的作用
$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数
$.ajax({
url: 'xxx',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "回调函数",// 自定义回调函数名
data: {}
})
优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果
缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题
5、cros跨域
cros跨域的实现主要时依靠后端实现，前端只要调用方法即可，不多做介绍
6、window.name跨域
window.name：
在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的；
每个页面对window.name都有读写的权限；
window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置；
可以存储不超过2M的数据，只能是String格式的数据
与document.domain类似，window.name的跨域需要使用一个中间iframe：
var iframe = document.getElementById('iframe');
iframe.onload = function () {
var window = iframe .contentWindow;
console.log(window.name);
}
iframe.src = '同源地址'
与 document.domain 方法相比，window.name放宽了域名后缀要相同的限制，可以从任意页面获取 string 类型的数据
7、Vue中的proxy跨域（常用）：
现在Vue项目下通常都会有vue.config.js文件作为项目的配置用，如果没有可以在根目录下新建，会自动读取；
通过配置proxy就可以成功跨域：
devServer: {
proxy: { // 配置跨域
'/api': {
target: 'xxxx',// 真实接口
changOrigin:true,// 允许跨域
pathRewrite: {i
'^/api': ''
}
},
}
},
通过配置，真实的路径会被掩盖，浏览器访问的地址将会被重写成真正的路径，安全性较高
注意： 是否形成跨域，在前端的判断是根据URL的路径（window.location.protocol + window.location.hos）判断的，头部的域就是判断的标准；
如果是协议和端口造成的跨域问题“前台”是无能为力的；
