前端跨域问题有哪些常用的解决方式?

1.背景介绍

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

广义的跨域:

1.) 资源跳转: A链接、重定向、表单提交

2.) 资源嵌入: link script img frame等dom标签,还有样式中background:url()、@font-face()等文件外链

3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 JS对象无法获得

3.) AJAX 请求不能发送

2.知识剖析

浏览器支持的跨域方法

网页为了获取资源本身有些属性可以跨域请求资源

link script @font-face

img video iframe

网页支持的发送请求的方法

Ajax 表单提交

1 JSONP

JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写,是应用 JSON 的一种新方法。

JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON数据。

                    
                    function handleResponse(response){ 
                        alert("You’re at IP address " + response.ip + ", which is in " + 
                              response.city + ", " + response.region_name); 
                    } 
                     
                    var script = document.createElement("script"); 
                    script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
                    document.body.insertBefore(script, document.body.firstChild); 
                
            

2 CORS - Cross-Origin Resource Sharing

通过 XHR 实现 Ajax 通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR 对象只能访 问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨 域请求对开发某些浏览器应用程序也是至关重要的。

CORS 背后的基本思想,就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

3 服务器反向代理

这种方法基本思路是发送正常的http请求,利用服务端之间的资源请求不会有跨域限制的特点,后台服务器转发请求到目标服务器请求资源。把跨域的问题交给服务器实现。

Nginx反向代理: 前端发起的请求被Nginx拦截,再由Nginx代由转发请求到资源服务器请求资源。


                        location / {
                              proxy_pass http://127.0.0.1:5000;
                            }
                

3.常见问题

Nginx反向代理如何实现

4.解决方案


                        location ^~/cross_origin/ {
                            #重写访问路径
                            rewrite ^~/cross_origin/(.*)$ /$1 break;
                              proxy_pass http://127.0.0.1:5000;
                            }
                

                    $.ajax({
                        url:'/cross_origin/get_json?type=20170126',
                        type:'GET',
                        dataType:'json',
                        success:function (data) {
                            $('#show').val(data.text)
                        }
                    })
                

5.编码实战

6.扩展思考

其他实现跨域的方法还有很多

与iframe相关的 location.hash、window.name、postMessage

WebSocket通信协议以及其它Ajax的改进方法

如何选择

比如单向的数据请求,我们应该优先选择JSONP或者window.name,

双向通信优先采取location.hash

在未与数据提供方达成通信协议的情况下我们也可以用server proxy的方式来抓取数据

7.参考文献

参考一  深入理解前端跨域方法和原理

参考二  JS 高程

8.更多讨论

问:jsonp的优缺点

答:优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码;其次,要确定 JSONP 请求是否失败并不容易。

问:跨域的方式有哪些?

答:document.domain + iframe   location.hash + iframe  window.name + iframe  postMessage 

Nginx反向代理 CORS JSONP  web sockets 

问:同源策略是什么

答:

同源策略是浏览器众多重要的安全措施之一,它规定

不同源的客户端脚本在没明确授权的情况下,不能读写对方的资源。

一个源由三个部分确定:协议(http与https)域名(顶域与子域,不同的子域)端口;这三个元素都要相同才是在同一个源下。

客户端脚本主要是指JavaScript和ActionScript(Flash)。

授权:服务器通过某种方式告诉浏览器,另一个域下的脚本可以访问我。

资源:HTTP头,DOM树,Cookie,localStorage等。

 

技能树.IT修真院   

 “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。

快来与我一起学习吧~邀请链接 点击打开链接

 

展开阅读全文

没有更多推荐了,返回首页