跨域请求以及解决方案

前言

跨域的背景

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。也就是说当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域的安全限制

1：无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2：无法接触非同源网页的 DOM

3：无法向非同源地址发送 AJAX 请求

为什么会有跨域请求

随着前后分离的火热，前后分离的项目越来越多，那么跨域请求就越来越普遍。现在大部分前后分离的项目的后台接口都是为不同终端提供服务的，一般接口服务都是在一个域下而不同的终端是在不同的域下，因此跨域请求就很常见了。

下面是常用的跨域请求解决方案：

一、JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

二、CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

前端设置：根据xhr.withCredentials字段判断是否带有cookie

服务端设置：服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

兼容性(https://caniuse.com/#feat=cors)：

xdomainrequest(兼容IE8)

https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest·

1.只能是GET or POST请求，在使用post时，数据总是发送一个 Content-Type 为text/plain的

2.只能是HTTP或者HTTPS，并且双方的协议需要一致

3.总是使用异步请求

<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>

Cross-domain AJAX using Flash

利用Flash的方式实现跨域请求：参考http://blog.zyan.cc/ajaxcdr/
来源：前端开发博客