前置知识

什么是跨域？

浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：

同源策略

同源机制是浏览器处于安全考虑，只允许相同源的接口进行相互通信。不同源的接口在没有得到对方授权的情况下不能够读写对方的资源。这个很好理解，如果没有同源机制，浏览器中的cookie就可以被随意读取，一旦用户进入恶意网站，恶意网站就可以读取用户的cookie，伪造用户进行登陆转款等操作。

同源策略的交互方式有三种：

• 通常允许跨域写操作，例如链接，重定向等。
• 通常允许跨域嵌套资源，例如 img，script 标签等。
• 通常不允许跨域读操作。

同源指的的是同时满足以下三个条件的地址：

1. 同协议，如http或https
2. 同域名，如www.baidu.com/login和www.baidu.com/addProduct是同域名，其中www.baidu.com是域名
3. 同端口，如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框架设置为例：

客户端设置：

node端设置：

res.header("Access-Control-Allow-Origin", "*");//允许所有地址跨域访问服务器资源

2.jsonp

我们在开始讲同源策略的时候提到过，同源策略是允许script标签跨域访问资源的。jsonp方法就是利用的这个原理跨域的。

以Jquery的ajax请求为例：

点击send按钮，send端跨域postMessage发出一个字符串

接收端代码：
http://localhost:8082/reciever.html

此时观察接受地址的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 就是让服务器转发自己的跨域请求，因为服务器不受到跨域策略限制。