Web前端开发关于跨域请求的几种方法浅析

越来越多的互联网项目由于用户体验为王的愿景，都一猛子扎进前后端分离模式的怀抱。从而带来一个现实的问题，需要做跨域请求。之所以需要跨域，起因是因为一个叫同源策略的浏览器核心安全机制。名词解释（同源策略：是由Netscape提出的一个著名安全策略，旨在防止现代浏览器（能执行脚本的浏览器）被来自不同源的恶意代码攻击。所谓同源是指，域名、协议、端口都相同）

常见跨域方式：

1. JSONP
2. CORS
3. XDR
4. Proxy

分析：

1. JSONP的原理是通过在网页中添加一个<script>标签，利用它可以访问第三方域名的特性，通过src属性访问get接口并携带一个回调函数，服务端执行查询后将结果填充在回调函数中返回执行。
   优点：不需要后端做配置工作只需按需求把响应格式的JSON放在回调函数中返回即可。
   缺点：1. 不支持POST请求。
   2. 不是XHR请求，不容易判断请求失败，大多数前端工具判断失败是结合请求超时来实现。
   3. 容易造成XSS漏洞，通过往请求里嵌入恶意脚本形成XSS攻击。
2. CORS是W3C组织提出的跨源资源共享标准，其原理是在HTTP的响应头部中定义Access-Control-Allow-Origin:(跨域访问域名，可使用通配符字符串拼接)，通知浏览器允许当前域跨源从响应服务域上获取资源。
   优点：W3C发布的正式跨域标准，浏览器厂商都会跟进
   缺点：部分桌面浏览器不支持，例如：ie6、7。
   如果是单纯的移动端站点可以直接使用此方法，除OpearMini外移动端浏览器都提供了很好的支持。
   3. XDR是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。
   4. Proxy，代理的原理是通过前端同域服务器转发请求的方式实现跨域访问。
      常见的方式有：
      1. 利用Nginx配置反向代理把前端请求转发至后端服务器，这种方式的优势是实现简单不需要前后端修改代码，支持所有浏览器。缺点也很明显，每个请求都要经过两次请求造成请求时间延长。
      2. 另一种方式就是在同域服务器上部署自己的代理服务，例如用node编写转发服务，因为node的异步无阻塞特性可以支持更多的并发请求，并且我们灵活的配置需要缓存的数据从而降低重复
         请求的次数。关于node可以做的事可以尽情发挥你的想象，如：请求过滤、安全策略、用户行为统计等等。
         综上，最好的跨域方式无疑是有W3C支持的CORS方式，但要所有厂商支持尚需时日而且对于ie6、7这种老式服务器微软已经不再继续维护要实现的可能性不大。最适合我们时代的方式是Proxy方式，可以提供更灵活更能发挥想象力的方式。