前置知识
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
同源策略
同源机制是浏览器处于安全考虑，只允许相同源的接口进行相互通信。不同源的接口在没有得到对方授权的情况下不能够读写对方的资源。这个很好理解，如果没有同源机制，浏览器中的cookie就可以被随意读取，一旦用户进入恶意网站，恶意网站就可以读取用户的cookie，伪造用户进行登陆转款等操作。
同源策略的交互方式有三种：
- 通常允许跨域写操作，例如链接，重定向等。
- 通常允许跨域嵌套资源，例如 img，script 标签等。
- 通常不允许跨域读操作。
同源指的的是同时满足以下三个条件的地址：
- 同协议，如http或https
- 同域名，如www.baidu.com/login和www.baidu.com/addProduct是同域名，其中www.baidu.com是域名
- 同端口，如80端口等
如：
http://www.baidu.com https://www.baidu.com //这两个网址由于协议不同，因此不属于同源 http://www.baidu.top http://www.baidu.com //这两个网址由于域名不同，因此不属于同源 http://www.baidu.com:80 http://www.baidu.com:8080 //这两个网址由于端口不同，因此不属于同源 https://www.baidu.com/login https://www.baidu.com/add //这两个网址属于同源
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"
Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
cors具体设置根据使用的后端语言不同会有所区别，此处以node的express框架设置为例：
客户端设置：
<script>
$.ajax({
type: 'post',
url: 'http://127.0.0.1:5000',
success: function(res) {
console.log('成功跨域');
console.log(res);
}
})
</script>
node端设置：
res.header("Access-Control-Allow-Origin", "*");//允许所有地址跨域访问服务器资源
2.jsonp
我们在开始讲同源策略的时候提到过，同源策略是允许script标签跨域访问资源的。jsonp方法就是利用的这个原理跨域的。
以Jquery的ajax请求为例：
<script>
function jsonpCallback(data){
console.log("成功跨域，数据为:",data) ;
}
$.ajax({
method:"GET",
url:"https://www.baidu.com",
dataType:"jsonp",
jsonpCallback:"jsonpCallback" //设置jsonp的回调函数
})
<script>
优缺点：
- 兼容性好，低版本的 IE 也支持这种方式。
- 只能支持get方式的 HTTP 请求。
3.window.postMessage
postMessage跨域方法是HTML5的新特性，该方法必须接受两个参数：
- message：需要传递的数据信息
- targetOrigin：需要发送请求的目标地址
示例：
发送端代码：
http://localhost:8081/send.html
Title <script> var my_window=window.open("http://localhost:8082/index.html"); function post() { var data={ name:"martin", age:18 }; my_window.postMessage(JSON.stringify(data),"http://localhost:8082/index.html"); } </script>
点击send按钮，send端跨域postMessage发出一个字符串
接收端代码：
http://localhost:8082/reciever.html
Title <script> window.addEventListener("message",function (message) { if(message.origin=="http://localhost:8081"){ //检验信息的来源，只要想要地址发送的信息 var input=document.getElementsByTagName("input")[0]; input.value=message.data; //将接收到的信息填入input框 console.log(message); } }) </script>
此时观察接受地址的input框，发现已经接受到了数据，至此跨域成功。
备注：想要将几个网页在不同的端口打开，可以安装http-server这个node模块，无需配置，即装即用。
4.proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
示例：
当前状况：
- 浏览器前端域为http://localhost:3000，该页面提供了接口可以向服务端http://localhost:3001发送请求
需求：
- 需要浏览器跨域向http://localhost:3002发送请求
代理跨域：
- 让3000端口的前端先向3001端口的服务端发送请求，然后再让服务端向目标地址3002端口发送请求
- 然后服务端再将响应数据转发给前端网页
总结：
从这个例子的描述中可以看出，代理跨域方案说白了就是让代理作为一个中间人，在前端和目标地址之间担任一个信息转发的功能，就有点像婆媳有矛盾不能直接沟通，所有一般让丈夫做为中间人来传话。
总结
- 协议，域名，端口号不全相同的资源之间相互通信时，就会产生跨域问题。
- 出于安全考虑，浏览器的同源策略限制了不同域之间相互通信。
- JSONP，CORS，Server Proxy都是常用的前后端跨域通信的解决方式，postMessage跨域解决方案主要是解决窗口页面之间的数据通信。
- JSONP 只支持 GET 方式的 HTTP 请求。
- CORS 跨域方案是在后端进行设置的。
- Server Proxy 就是让服务器转发自己的跨域请求，因为服务器不受到跨域策略限制。