关于跨域访问的扯淡

在web应用开发的过程中，难免遇到跨域访问的问题：

关于跨域访问，网上也有人总结出了7/8种不同的解决方案，这里我简单整理一下我自己尝试过的解决方案。

首先要说明一下跨域访问这个东西到底是怎么一回事情，简单的说大致是这样的。由于在web前端开发的时候，大部分的本地数据存储在cookie里面，但是浏览器的cookie基本上是没有任何沙箱措施的，也就是说某台电脑的浏览器在访问A网站时候存下的cookie，在访问B网站的时候依旧可以读到，这显然很不安全，因为如果B网站是个恶意网站，去模仿A网站发送请求，那么用户信息就可能会大量的被串改。所以为了应对这个问题，浏览器就会在请求的响应头中查找一个叫做“Access-Control-Allow-Origin”的参数，然后查看这个响应头中是否包含了发送请求的网页所在的域（IP或域名+端口），如果不包含，那么就会爆出跨域访问的错误。

知道了跨域访问的原理，再去考虑如何解决就好办了，这里总结三种：

方案一：服务端加上响应头参数

既然浏览器要检查响应头的“Access-Control-Allow-Origin”参数，那就自己给他加上呗，加上的方式可以是IP:PORT，如果嫌麻烦可以直接用通配符‘*’：

方案二：JSONP

以前有一群码农闲的无聊试试试发现浏览器中除了AJAX，其余的方式基本上都不受跨域访问限制，比如说我们的<script>标签的src属性。

那么现在假如我们有个字符串：

且有一个回调函数：

然后我将这个字符串放入一个Script标签中去，由于括弧内的JSON格式和JS的对象字面量高度一致，因此：

         

浏览器显而易见地执行了JSONPCallBack函数，并生成了JSON对应的对象。

那么如果我把这个字符串放在远程生成，然后用script的src标签去获取这个远程的数据的话呢？

然后在JS端的代码中生成请求路径的URL并带上回调函数名称的参数callBack=JSONPCallBack，动态生成script标签并赋值src属性。

总结来说就是服务端将原本需要传回的JSON格式字符串拼接在回调函数名称和括弧包含的新字符串中返回，而JS动态创建script标签去获取这段返回的JS格式的字符串。

当然在很多框架如JQuery中将JSONP很好的封装在了AJAX的操作中，方便了开发人员的使用。

方案三：代理服务端

我们之前说了跨域访问是浏览器的AJAX访问的特有约束，那么假如我们不直接跨域访问，而是在域内给一个代理后台发送请求，而由代理服务端去重新发送请求

由于代理服务端不属于AJAX请求，因此自然不会有跨域问题。

代理后台去请求域外的内容：

在JS的代码中直接访问这个域内服务器

这种方式相比前两种更加复杂，但是在有些时候，比如我们需要的内容所在的服务端的代码不可改动的情况下，用这种请求转发就相当有用了。

除此之外，在H5中我们还可以直接用webSocket去解决跨域问题，这个就自行百度不给于详解了。