跨域概念及解决方案

什么是跨域

跨域问题是指正常的跨站请求被浏览器的安全限制（同源策略）拦截了下来，使跨站请求不通。

产生跨域的必备条件：

1. 跨站请求，即协议、域名、端口至少有一个不一致
2. 浏览器没有禁用安全限制
3. 采用的是XMLHttpRequest请求（浏览器接口，主要为js等脚本调用）

为什么要有跨域

跨域限制主要是浏览器的同源策略限制，其目的是为了保证网站安全，防止XSS，CSRF等攻击。

举个例子：
假设我是a.com（某酷视频）的超级管理员，可以管理a.com的所有会员账号（增删改查），然后我在a.com登录了我的超管账户，接着我又访问了b.com网站，b.com不怀好意的在后台写了一些恶意代码，这些代码可能是模拟了a.com的添加新会员账号的功能，由于没有同源策略的限制，b.com就可以执行这段恶意代码，成功的请求a.com创建了大量的新会员账号。

由此可见，浏览器的跨域限制至关重要。在浏览器同源策略影响下，网站b.com向网站a.com发送Ajax请求，或操作Cookie、LocalStorage、indexDB等数据，或操作dom，js就会受到限制，但请求css，js等静态资源不受限制。

CORS实现跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。目前几乎所有浏览器都支持CORS，IE则不能低于IE10，它是跨域问题的官方解决方案，下面是CORS标准的跨域请求过程。

CORS跨域请求类型分为简单请求和非简单请求。

简单请求

只要同时符合以下两个条件，就属于简单请求：

1. 请求方法是get、post、head三者之一
2. 请求头信息最多包含以下字段：
   Accept
   Accept-Language
   Content-Language
   Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求，浏览器会直接发送CORS请求，具体说来就是在请求头中加入origin请求头字段（协议 + 域名 + 端口）。同样，在响应头中，响应服务器会设置的相关CORS头部字段Access-Control-Allow-Origin字段为允许跨域请求的源。如果请求头的origin字段与响应头的Access-Control-Allow-Origin字段允许的跨域地址一致，则会成功返回。

非简单请求

不符合简单请求条件的都属于非简单请求。

当发生符合非简单请求的条件时，浏览器会自动先发送一个options预请求，如果发现服务器支持该请求，则会将真正的请求发送到后端，反之，如果浏览器发现服务端并不支持该请求，则会在控制台抛出错误。

预请求

预请求就是使用 OPTIONS 方法。非简单跨域请求首先需要发送预请求，即使用 OPTIONS 方法发起一个预请求到服务器，同时服务器会在响应头返回允许跨域的源信息，浏览器接收响应和请求域作对比，以获知服务器是否允许该实际请求跨域访问。

跨域才会有预请求，但是不是所有跨域请求都会发送预请求的。预请求服务器正常返回，浏览器还要判断是否合法，才会继续正常请求的。所以web服务程序需要针对OPTIONS 做处理，要不然 OPTIONS 的请求也会运行后端代码。一般预请求最好返回204(NO-Content)。

CORS实现跨域，对于前端来说无需修改，只有当需要携带cookie信息时才需要设置withCredentials=true。而对于后台来说只需要在响应头中设置相关的跨域字段信息即可。