资讯专栏INFORMATION COLUMN

前端解决跨域

goji / 2408人阅读

摘要:所有支持的浏览器都会使用同源策略这个安全策略,所谓同源是指,域名,协议,端口相同,就是因为同源策略的影响导致没法直接用请求不同域上的数据,所以各种解决问题的技术出现了。

在日常的项目开发时会不可避免的需要进行跨域操作,面试中也是频繁被经常会问到的问题,本文只是我经常用到的解决跨域的方式做个记录与总结。

所有支持Javascript的 浏览器 都会使用‘同源策略’这个安全策略,所谓同源是指,域名,协议,端口相同,就是因为同源策略的影响导致没法直接用XMLHttpRequest请求不同域上的数据,所以各种解决问题的技术出现了。

Jsonp

通过dataType指定jsonp,jquery底层封装后,会在head标签后面追加

所有的jsonP都是这个原理,借助script标签的跨域特性来实现,callbackFun再jquery中是自动生成的,后台会获取jsoncallback参数,获取对应的函数名称,最后包装成想要的格式,比如最后输出结果是:callbackFun({"result":"suc","code":"1000"}),那么再Jquery中,会将该方法直接指定给success方法,最后来接收返回的数据。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

cors

CROS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CROS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
前端实现方式和一般的ajax请求是一样的,只是方式的接口是绝对地址。服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

服务器代理

禁止跨域问题其实是浏览器的一种安全行为,假如我们的目标服务器不能设置header,而且我们需要发送post请求,上面的解决方案就被否定了,但是服务器与服务器之间的请求是不存在跨域的。

强大的nginx,伟大的nodeJS都可以实现一个代理服务器功能。

反向代理服务器,就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问。对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。

nginx的配置方法网上已经泛滥了,保存几个参考过的网址。
http://www.imooc.com/article/...
http://www.cnblogs.com/renjin...
http://www.cnblogs.com/bninp/...

nodeJs 主要是使用的node-http-proxy实现的,相关信息也很多。
https://github.com/nodejitsu/...
http://www.cnblogs.com/woodk/...
http://blog.csdn.net/jaye100/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88335.html

相关文章

  • ajax跨域,这应该是最全的解决方案了

    摘要:关于,强烈推荐阅读跨域资源共享详解阮一峰另外,这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。 个人见识有限,如有差错,请多多见谅,欢迎提出iss...

    ytwman 评论0 收藏0
  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...

    Yangyang 评论0 收藏0
  • 前端跨域方法论

    摘要:说明是否允许通讯同一域名允许同一域名下的不同文件夹允许不同端口号不允许不同协议不允许不同域名不允许主域相同,子域不同不允许跨域解决方案由于浏览器同源策略是允许标签这样的跨域资源嵌套的,所以标签的资源不受同源策略的限制。 前言 本着学习和总结的态度写的技术输出,文中有任何错误和问题,请大家指出。更多的技术输出可以查看我的 github博客。 整理了一些前端的学习资源,希望能够帮助到有需要...

    leejan97 评论0 收藏0
  • 前端常见跨域解决方案(全)

    摘要:需注意的是由于同源策略的限制,所读取的为跨域请求接口所在域的,而非当前页。目前,所有浏览器都支持该功能需要使用对象来支持,也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略,不是协议的一部分。 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源...

    canger 评论0 收藏0
  • 彻底弄懂跨域问题

    摘要:用于告知浏览器可以将预先检查请求返回结果缓存的时间,在缓存有效期内,浏览器会使用缓存的预先检查结果判断是否发送跨域请求。 跨域,老生常谈的问题 简述 作为一只前端菜鸟,跨域方面只懂得JSONP和CORS,并未曾深入了解。但随着春招越来越近,就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题,写下这篇文章,希望对开发者们有所帮助。在读本文前,希望您对以下知识略有了解。 浏览器同源策略 n...

    rose 评论0 收藏0

发表评论

0条评论

goji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<