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

微信平台开发前端和后端
微信公众号前端开发html
微信公众号前端开发js

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

常见跨域方式:

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

分析:

  1. JSONP的原理是通过在网页中添加一个<script>标签,利用它可以访问第三方域名的特性,通过src属性访问get接口并携带一个回调函数,服务端执行查询后将结果填充在回调函数中返回执行。
    优点:不需要后端做配置工作只需按需求把响应格式的JSON放在回调函数中返回即可。
    缺点:1. 不支持POST请求。

    1. 不是XHR请求,不容易判断请求失败,大多数前端工具判断失败是结合请求超时来实现。
    2. 容易造成XSS漏洞,通过往请求里嵌入恶意脚本形成XSS攻击。
  2. CORS是W3C组织提出的跨源资源共享标准,其原理是在HTTP的响应头部中定义Access-Control-Allow-Origin:(跨域访问域名,可使用通配符字符串拼接),通知浏览器允许当前域跨源从响应服务域上获取资源
    优点:W3C发布的正式跨域标准,浏览器厂商都会跟进
    缺点:部分桌面浏览器不支持,例如:ie6、7。
    如果是单纯的移动端站点可以直接使用此方法,除OpearMini外移动端浏览器都提供了很好的支持。

    1. XDR是IE8、IE9提供的一种跨域解决方案,功能较弱只支持get跟post请求,而且对于协议不同的跨域是无能为力的,比如在http协议下发送https请求。
    2. Proxy,代理的原理是通过前端同域服务器转发请求的方式实现跨域访问。
      常见的方式有:

      1. 利用Nginx配置反向代理把前端请求转发至后端服务器,这种方式的优势是实现简单不需要前后端修改代码,支持所有浏览器。缺点也很明显,每个请求都要经过两次请求造成请求时间延长。
      2. 另一种方式就是在同域服务器上部署自己的代理服务,例如用node编写转发服务,因为node的异步无阻塞特性可以支持更多的并发请求,并且我们灵活的配置需要缓存的数据从而降低重复
        请求的次数。关于node可以做的事可以尽情发挥你的想象,如:请求过滤、安全策略、用户行为统计等等。
        综上,最好的跨域方式无疑是有W3C支持的CORS方式,但要所有厂商支持尚需时日而且对于ie6、7这种老式服务器微软已经不再继续维护要实现的可能性不大。最适合我们时代的方式是Proxy方式,可以提供更灵活更能发挥想象力的方式。
微信平台开发前端和后端
微信公众号前端开发html
微信公众号前端开发js
» 本文来自:前端开发者 » 《Web前端开发关于跨域请求的几种方法浅析》
» 本文链接地址:https://www.rokub.com/7168.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!