什么是跨域？为什么要禁止跨域？怎样跨域？
什么是跨域
现代浏览器出于安全考虑，都会去遵守一个叫做“同源策略”的约定，同源的意思是两个地址的协议、域名、端口号都相同的情况下，才叫同源。这个时候两个地址才可以相互访问 cookie、localStorage、sessionStorage、发送 ajax 请求，如果三者有一个不同，就是不同源，这时再去访问这些资源就叫做跨域。
为什么禁止跨域
跨域访问会造成很多安全问题，下面我们来看一下常见的两种跨域请求：
- ajax 请求：A.com 中 请求 B.com 的接口，这个时候请求会带上 B.com 的 cookie，通常会有登录信息之类的，我们称之为 CSRF攻击
- dom 操作：A.com 中使用 iframe 嵌套了 B.com 的广告，这时候如果 B.com 对 A.com 中的 dom 任意操作，那么主网站 A.com 就崩了
- 字体文件：字体文件也有跨域限制，只是我还不明白为什么
那么哪些请求时不会造成跨域的呢
- js、css、image 等静态文件
- form 表单提交
因为这些请求不会携带 cookie，也就没有跨域限制
怎么跨域
浏览器对某些请求限制了跨域访问，但是实际开发中，我们又确实需要去跨域访问，怎么办呢？
jsonp
由于访问 js 文件是没有跨域限制的，我们可以利用这一点来做跨域。具体过程如下：
客户端预先定义好一个 function 用来接收数据，然后动态的创建一个 script 插入到页面中去后端请求数据
function run (data) {
console.log(data.name)
}
var script = document.createElement('script')
script.src = 'http://xxx.js?callback=run'
document.body.appendChild(script)服务端通过 callback 指定的函数名，将数据传入其中，这样 js 到达客户端就能直接执行函数，把数据传入预先定义好的函数中
run({ name: '张三' })优点：
- 无跨域限制
- 兼容性好，古老的浏览器也可以使用，无需XMLHttpRequest或ActiveX支持
缺点：
- 只能发起 get，不能发起 post
- 只支持 http 请求，不能解决两个不同源页面之间的通信问题
- 不像 ajax 可以返回详细的状态码，用于错误处理
- 页面上会频繁的插入 script 元素，如不及时清除，页面将变得卡顿
window.name
该属性有以下特征
- 每个窗口都会有自己独立的 window 及 window.name
- 在一个窗口的生命周期中（被关闭前），窗口中载入的所有页面都共享一个 window.name，且每个页面对 window.name 都有读写的权限
- window.name 一直存在当前窗口，即使有新的页面进来也不会改变它的值
- window.name 可以存储不超过 2M 的数据，数据格式可以自定义
document.domain + iframe 跨子域
默认情况下 document.domain 存放的是载入文档的主机名，例如 a.main.com。可以手动修改这个值，但是有限制：
- 只能改成当前域名 a.main.com 或上级域名 main.com。
- 必须包含一个 "."，也就是说不能设置成顶级域名 com
利用这一点，对于主域名相同，而子域名不同的两个页面，例如 a.main.com 使用 iframe 嵌入了 b.main.com，可以使用 document.domain 来跨域。
当在 a 页面直接通过 iframe.contentWindow 想去操作 b 页面，或者 b 页面通过 window.top、window.parent 想去操作 a 页面时，就是出现跨域限制。
这个时候我们可以在 a、b 两个页面同时设置 document.domain = 'main.com'，然后再去相互访问就没有问题了
location.hash + iframe
我们都知道，页面地址中 hash 值的改变是不会引起页面刷新的，所以我们可以利用 hash 值来在不同域中传递数据。例如
a.com 使用 iframe 嵌入了 b.com。a 页面要向 b 页面传递数据就可以通过改变 b 页面的 hash 值，具体过程如下：
a 页面：iframe.src = b.com#age=18
b 页面：window.onhashchange = function () {console.log(localtion.hash)}
缺点：
- 只能从父窗口向子窗口单项传递数据
- 由于数据是放在url上的，所以有长度限制
postMessage
postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，它可以解决以下几个需求场景：
- 多窗口之间的消息传递
- 主页面与嵌入在 iframe 内的页面之间的消息传递
举例说明一下用法，比如 a 页面内通过 iframe 嵌入了 b 页面，现在要互相传递数据
a -> b
- a 页面：iframe.contentWindow.postMessage('xxxx', 'http://b.com')
- b 页面：window.addEventListener('message', function(e) { console.log(e.data) })
b -> a
- a 页面：window.addEventListener('message', function(e) { console.log(e.data) })
- b 页面：window.top.postMessage('xxxxx', 'http://a.com')
这里需要注意几点
- postMessage 的第一个参数是消息体，格式无限制，可以是 String、Array、Object
- 第二个参数是目标窗口的地址，遵守同源策略，如果不同源，则目标窗口接收不到消息。如果传入的时 “*”，则任意窗口都可以获取到
服务器代理
浏览器有跨域限制，但是服务器不存在跨域问题。所以可以浏览器可以把需要跨域的请求先发给服务器，由服务器去请求资源，然后再把结果返回给浏览器。
典型的应用场景：前后端分离
前后端分别有一个域名，前端访问服务端接口就出现了跨域限制，这个时候前端就可以在所有的服务端接口前加上一个标志如 /api，然后在前端服务器和后端服务器前在加一层分发，带 /api接口的都访问后端服务器，并去掉 /api，其他的都访问前端服务器。
WebSocket协议跨域
WebSocket protocol 是 HTML5 中的一种新协议，它实现了浏览器与服务端全双工通信，同时支持跨域。拿比较知名的websocket 库 Socket.io 来举例说明它的用法：
浏览器
var socket = io('http://localhost:8080')
socket.on('connect', function () {
socket.on('message', function(msg) {
console.log('收到消息：' + msg)
})
socket.on('disconnect', function() {
console.log('关闭连接')
})
})服务器
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});
// 断开处理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});跨域资源访问（CORS）
CORS 时 W3C 的标准，它允许浏览器向跨源服务器发起 ajax 请求，从而达到跨域访问的目的。这是当前比较流行的跨域方式，知识点也比较多，下面我们一一展开。
浏览器将 CORS 请求分为两类：简单请求（simple request）和非简单请求（not-so-simple request）
简单请求需要同时满足以下两个条件：
1、请求方法是一下三种之一
- HEAD
- GET
- POST
2、请求头不能超出一下几个字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Context-Type 只限于三个值：application/x-www-form-urlencoded、multipart-part/form-data、text/plain
除此以外的就是非简单请求
简单请求
当浏览器判断此次是一个跨域的 ajax 简单请求时，会自动在 request header 中加入 Origin 字段，用来标识本次请求来自哪个源（协议、域名、端口号），服务器根据这个值决定是否允许本次请求。
如果服务器同意本次请求，会在 response header 中加入以下几个字段
- Allow-Control-Allow-Origin：它的值为请求时的 Origin 字段或者 *，表示允许跨域的来源，* 表示允许所有的源来跨域访问
- Allow-Control-Allow-Credentials：布尔值，表示服务器是否接受来自浏览器跨域请求时所携带的 cookie
- Allow-Control-Expose-Headers：浏览器通过 XMLHttpRequest 对象的 getResponseHeader 方法只能拿到 6 个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Prama。如果浏览器想拿到其他字段，就需要服务器在改字段中指定
默认情况下，CORS 请求是不携带 cookie 的。如果需要在 request header 中放入 cookie，除了上面说的服务器需要在 response header 中设置 Allow-Control-Allow-Credentials: true，表示愿意接受跨域 cookie 之外，浏览器也需要设置一个参数表示允许发送 cookie
xhr.withCredentials = true;非简单请求
我们先来看一个 http 请求
var xhr = new XMLHttpRequest()
xhr.open('DELETE', 'http://xxx/deluser', true)
xhr.setRequestHeader('token', '888')
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
xhr.send()预检请求（prelight）
根据上面我们对简单请求的约定，发现这条请求的方法、头字段、Content-Type 的值都不符合简单请求的约定。所以浏览器会判断出此次的 http 请求是一次非简单请求。
浏览器会先发出一条 http 请求询问服务器，当前源是否在服务器的允许名单之内，以及可以使用哪些头信息。我们称这次询问为“预检”（prelight）,预检的请求方法是 options，request header 中会有这么几个重要的字段：
- Origin：表示请求来自哪个源
- Access-Control-Request-Method：表示浏览器的 CORS 请求将会用到哪些 http 方法
- Access-Control-Request-Headers：该字段是以都好分割的字符串，表示 CORS 请求会额外携带的头字段
服务器接收到“预检”请求后，会检查上述三个字段，如果允许跨域就做出相应头信息
- Access-Control-Allow-Origin: http://api.bob.com
- Access-Control-Allow-Methods: GET, POST, DELETE
- Access-Control-Allow-Headers: token
- Access-Control-Allow-Credentials: true
- Content-Type: application/json; charset=utf-8
正常请求
浏览器在接收到服务器的“预检”相应后，判断出服务器允许跨域。这时便会发送正常的请求，只是在每次请求中，都会往 request header 中加入 Origin 字段，相应的服务器也会在每次相应中，在 response header 加入 Access-Control-Allow-Origin 字段