前端之跨域

2019独角兽企业重金招聘Python工程师标准>>>

为什么会有跨域呢？

由于浏览器的同源策略的限制（所谓同源是指域名、协议、端口都相同），例如开源中国

（https://www.oschina.net/）网站的js不能访问CSDN（http://www.csdn.net/）网站的数据，因为这两个网站 是不同的域，也就不是同源的网站了，所以就出现了跨域。

什么是同源策略呢？

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策

略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同 源策略的一种实现。浏览器出于安全的考虑，限制js只能访问同源的网站的数据。 虽然浏览器限制了我们js访问非同源网站，但是我们有时又需要跨域，下面说说几种常用的跨域方案吧。

一、jsonp
jsonp(JSON with Padding),jsonp不是json，可以说是一种手段。因为ajax直接请求普通文件存在跨域限

制，但是我们在请求js、css、图片这些静态资源的时候，浏览器没有限制我们必须是同源的，换句话说就是 我们可以去请求其他网站的js文件。 我们知道，当浏览器下载好了一个js文件之后就会去执行这个文件里面的代码。所以基于这样的理论，我 们在请求js文件的时候，把需要的参数加在路径上，被请求的网站的后台同学按照我们的需求动态的拼装一 个js文件，当我们得到这个js文件之后，那我们不就达成我们跨域访问的目的了。当然，为了操作方便，我 们一般会传一个回调函数名过去，这样就能在返回的js文件加载好之后执行我们的回调函数了，这和我们平 时的ajax是不是又有些类似感觉了呢。 jsonp明白了之后其实也就那么回事了，需要注意的是这是一个get请求，上传的长度是有限制的，在安全 方面也需要自己做些处理。

二、跨域资源共享（CORS）
其实我们之所以需求跨域是因为浏览器基于安全的考虑，所以限制了js访问非同源网站的功能，那么如果

我们告诉浏览器不需要限制其他网站对本网站的访问呢？html5的 Cross-Origin Resource Sharing，跨域资 源共享就是这样的一个解决跨域的方案。 只需要被访问的网站在返回的header里面设置 Access-Control-Allow-Origin:（允许访问的网站 或者*所有 网站都可以访问）。设置response的header需要被访问网站后台设置，如Java设置 response.setHeader('Access-Control-Allow-Origin','https://my.oschina.net/'); php设置 <?php header('Access-Control-Allow-Origin :https://my.oschina.net/ '); ?> ; node.js设置 response.setHeader(‘Access-Control-Allow-Origin','https://my.oschina.net/') 。当然除了后台语言中设置， 也可以在服务器配置，不过因为是html5新增的内容，所以存在兼容性的问题，IE10以下的浏览器都不能支 持。

三、WebSocket WebSocket是一种基于一个TCP连接的全双工通讯协议，也就是说服务端可以主动推送数据给客户端，客 户端也可以发送数据给服务端。而且WebSocket是允许跨域通信的，所以我们也可以用WebSocket来进行跨 域操作，当然会有兼容性问题。不过如果是后台管理系统等可以使用指定浏览器的项目的倒也可以使用。如 果单独用WebSocket来做跨域或许不合适，不过如果本来就用了WebSocket的，那就可以刚好用来做跨域 了。

四、服务器代理 前面说可以在服务器配置，如nginx服务器，在nginx.conf中配置： http{ ... add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; ... } 不过这种配置依然是利用的html5的 Cross-Origin Resource Sharing，其实也可以利用nginx的反向代理来实现跨域。 反向代理（Reverse Proxy）是只以代理服务器来接受 Internet 上的链接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给Internet请求链接的客户端，此时，代理服务器对外就表现为一个服务器。 前面做一个后台项目的时候就是用的服务器代理的方式来解决跨域问题的，具体可以看下StuPig 的这篇文章：http://www.tuicool.com/articles/zIRFje。

五、后端代理 前面说了，前端之所以会有跨域问题是因为限制了js跨域请求，但是后端可没有这限制。我们可以让后台同学去访问需要请求数据的网站，获取到数据之后再将数据返回给前端。这种方式对于前端而已其实就并不是在跨域了，只是一次普通的请求，而后台因为不存在同源策略的限制，所以可以访问其他网站的数据，这种跨域方式不需要和目标资源签订协议，带有侵略性。

当然，除了前面说的几种外，还有其他的一些跨域方式。如postMessage + iframe、document.domain + 

iframe、location.hash + iframe、window.name + iframe，这几种方式都是利用了iframe的src没有同源的限 制，与iframe内网页通信来达到跨域的目的，不过需要引入被请求数据的网站的网页，如果单纯就用来作跨 域，个人觉得不如在前面说的几种方式中选一种。还有flash有自己的一套安全策略，而且flash 属于插件类 了，不被浏览器的同源策略限制，也可以用来作为跨域的手段。不过在使用flash会存在跨平台问题（某些品 台不支持flash，如苹果手机），所以如果想要跨平台使用并不合适。

其实跨域的方式方法还是蛮多的，这里没有详细讲解每种方案，但至少应该了解这些方案，在我们做项目

的时候也不是一定要用某种方案的，最重要的是哪种方案更适合当前场景的。

转载于:https://my.oschina.net/liuyongfov/blog/754014