web开发中的跨域问题解决方法

1.跨域问题出现的原因:

同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。

SOP要求两个通讯地址的协议域名端口号必须相同,否则两个地址的通讯将被浏览器视为不安全的,并被block下来。比如“http页面”和“https页面”属于不同协议;“qq.com”、“www.qq.com”、“a.qq.com”都属于不同域名(或主机);“a.com”和“a.com:8000”属于不同端口号。这三种情况常规都是无法直接进行通讯的。

2.解决方法:目前业界流行的解决方案有三种:服务器代理、JSONP、CORS,接下来将分别介绍这三种方案。

(1)服务器代理:

页面直接向同域的服务端发请求,服务端进行跨域处理或爬虫后,再把数据返回给客户端页面。通过Nginx反向代理解决跨域问题是利用了服务端之间的资源请求不会有跨域限制的特点实现的,具体来说就是前端发起的请求被Nginx拦截,再由Nginx代由转发请求到资源服务器请求资源。

(2)JSONP(JSON with Padding)

  JSONP是JSON的一种"使用模式",可以让网页从别的域名那获取资料,即跨域读取数据(只支持GET请求,不支持POST、PUT等其他类型的HTTP请求)。JSONP利用的是标签可以跨域的特性,跨域URL返回的脚本不仅包含数据,还包含一个回调。jQuery已经提供了JSONP的使用

  JSONP的使用步骤:

  1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。

  2. 服务器生成json数据以javascript语法生成一个function , 名字就是传递上来的参数callback。

  3. 最后将json 数据以入参的方式,放到function中,这样就生成了一段js语法的文档,返回给客户端。

  4. 客户端浏览器解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)。

(3)CORS(跨域资源共享)

同域安全策略CORS(Cross-Origin Resource Sharing)是W3C在05年提出的跨域资源请求机制,它要求当前域(常规为存放资源的服务器)在响应报头添加Access-Control-Allow-Origin标签,从而允许指定域的站点访问当前域上的资源。



猜你喜欢

转载自blog.csdn.net/qq_29854831/article/details/79455208