前后端部署在两台服务器 服务器配置要求_Web端即时通讯基础知识补课：一文搞懂跨域的所有问题...

本文原作者： Wizey，作者博客：http://wenshixin.gitee.io，即时通讯网收录时有改动，感谢原作者的无私分享。

1、引言

典型的Web端即时通讯技术应用场景，主要有以下两种形式：

• 1)作为完整的即时通讯产品进行应用：比如独立的Web端IM产品；2)作为某个更大系统中的一部分进行应用：比如客服系统(相当于工单系统里嵌入IM技术啦)。

对于第一种场景，为了更好的划分功能逻辑，一个完整的产品通常都会调用来自于不同服务器提供的各种接口(比如各种服务端微服务接口)，那么Web端跨域问题就无法回避了。

对于第二种场景，就更好理解：为了提升系统的可维护性，不同子系统间代码的互不倾入、低偶合设计，导致im子系统或服务很可能部署于独立的一台或多台服务器(域名)上，那么跨域问题显而易见。

所以，对于Web端即时通讯开发者来说，跨域问题是必须掌握的知识范畴。本文将为你讲解跨域问题原理，以及理论联系实际，用实践代码也为你演示解决跨域问题的几种方法。

PS：虽然在开发Web端即时通讯应用时，普通的Ajax调用、iframe文件上传等存在跨域问题，但好消息是作为技术核心的 WebSocket 技术是支持跨域的(不存在跨域问题)！

友情提示：本文配套的实践代码，请从文末附件处下载！

(本文同步发布于：http://www.52im.net/thread-2732-1-1.html)

2、什么是跨域问题

前端调用的后端接口不属于同一个域(域名或端口不同)，就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。

通俗的讲，跨域问题是因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。而在实际开发中，前后端常常是相互分离的，并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据，就必须发起请求，如果不做一些处理，就会受到浏览器同源策略的约束。后端可以收到请求并返回数据，但是前端无法收到数据。

3、为什么会发生跨域问题

要同时满足三个条件才会产生跨域问题：

• 1)浏览器限制，而不是服务端限制，可以查看Network，请求能够正确响应，response返回的值也是正确的；2)请求地址的域名或端口和当前访问的域名或端口不一样；3)发送的是XHR(XMLHttpRequest)请求，可以使用 a 标签(模拟xhr请求)和 img 标签(模拟json请求)做对比(控制台只报了一个跨域异常)。

关于 XMLHTTPRequest 可以参看这篇文章 ：《你真的会使用XMLHttpRequest吗？》。

跨域问题的根本，就是浏览器制定的同源策略导致的。

浏览器制定同源策略，其中一个重要原因就是对cookie的保护。

cookie 中存着sessionID 。黑客一旦获取了sessionID，并且在有效期内，就可以登录。当我们访问了一个恶意网站 如果没有同源策略 那么这个网站就能通过js 访问document.cookie 得到用户关于的各个网站的sessionID 其中可能有银行网站 等等。通过已经建立好的session连接进行攻击，比如CSRF攻击。

这里需要服务端配合再举个例子，现在我扮演坏人 我通过一个iframe 加载某宝的登录页面 等傻傻的用户登录我的网站的时候 我就把这个页面弹出用户一看 阿里唉大公司 肯定安全 就屁颠屁颠的输入了密码 注意 如果没有同源策略 我这个恶意网站就能通过dom操作获取到用户输入的值 从而控制该账户所以同源策略是绝对必要的。

还有需要注意的是同源策略无法完全防御CSRF(即(Cross-site request forgery)跨站请求伪造)。

4、解决跨域问题的三种思路

• 1)客户端浏览器解除跨域限制：此方式理论上可以但是不现实；2)发送JSONP请求替代XHR请求：此种方式虽然有一定的局限性——比如请求只能是GET方式，但对于部署来说很友好，因为不需要修改服务器配置；3)修改服务器端配置(包括HTTP服务器和应用服务器)：此方式对于GET、POST请求来说，没有局限性，但对于部署来说不太友好，需要修改应用服务器、反向代理服务器的相关配置。

5、跨域问题解决方法1：设置浏览器解除跨域限制

浏览器默认都是开启跨域安全检查的，我们可以使用命令行启动浏览器，加上禁止安全检查的参数，以谷歌浏览器为例，chrome.exe --disable-web-security --user-data-dir=E:/temp --user-data-dir 为浏览器缓存临时目录，浏览器这时会提示安全问题。

【浏览器如何判断一个请求是不是跨域请求？】

浏览器会根据同源策略来判断一个请求是不是跨域请求。

非跨域请求：在请求头中会只包含请求的主机名：

跨域请求：在请求头中会既包含要请求的主机名还包括当前的源主机名，如果这两者不一致，那就是跨域请求了：

【浏览器对请求的分类】

在HTTP1.1 协议中的，请求方法分为GET、POST、PUT、DELETE、HEAD、TRACE、OPTIONS、CONNECT 八种。浏览器根据这些请求方法和请求类型将请求划分为简单请求和非简单请求。

简单请求：浏览器先发送(执行)请求然后再判断是否跨域。

请求方法为 GET、POST、HEAD，请求头header中无自定义的请求头信息，请求类型Content-Type 为 text/plain、multipart/form-data、application/x-www-form-urlencoded 的请求都是简单请求。

非简单请求：浏览器先发送预检命令(OPTIONS方法)，检查通过后才发送真正的数据请求。

预检命令会发送自定义请求头为Access-Control-Request-Headers: content-type的请求到服务器，根据响应头的中的 “Access-Control-Allow-Headers”: “Content-Type” 判断服务器是否允许跨域访问。预检命令是可以缓存，服务器端设置 “Access-Control-Max-Age”: “3600”，这样后面发送同样的跨域请求就不需要先发送预检命令了。

请求头的含义如下所示：

响应头的含义如下所示：

请求方法为 PUT、DELETE 的 AJAX 请求、发送 JSON 格式的 AJAX 请求、带自定义头的 AJAX 请求都是非简单请求。

6、跨域问题解决方法2：使用JSONP替代XHR

6.1 JSONP 是什么

JSONP(JSON with Padding)是JSON的一种补充使用方式，不是官方协议，而是利用 Script 标签请求资源可以跨域的特点，来解决跨域问题的，是一种变通的解决方案。(详见《详解Web端通信方式的演进：从Ajax、JSONP 到 SSE、Websocke》一文中的第3节“三、JSONP”)

6.2 使用 JSONP，服务器后台代码需要改动吗？

答案是需要，这里以Spring Boot为例，在 Spring Boot 1.5 大版本中，添加一个切面来支持JSONP请求。

AJAX代码如下：$.ajax({ url: baseUrl + "/get1