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

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免费指导。

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