一文搞懂跨域的所有问题 _跨域

本文原作者： 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 为浏览器缓存临时目录，浏览器这时会提示安全问题。