跨域问题CORS

1、什么是跨域问题

 跨域问题是指由于浏览器基于同源策略的限制，只能访问同源的地址。如果访问非同源地址就会产生跨域问题。同源策略限制是浏览器的一种安全机制。

而所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。

 2、怎么解决跨域问题

在了解cors解决跨域之前，我们先来了解一下什么是简单请求和非简单请求。简单请求和非简单请求的请求方式是不同的。

简单请求：

1）请求方法为：HEAD、GET、POST中的一种。

2）HTTP请求头中字段不超过：Accept、Accept-Language、Content-Language、Last-Event-ID

3）Content-Type字段值为application/x-www-form-urlencoded、multipart/form-data、text/plain中的一种。

满足以上条件的即为简单请求，否则即为非简单请求。

简单请求浏览器会自动在请求头中加上Origin字段，代表请求来自哪个域（协议+主机名+端口号）。服务器在收到请求后，根据请求头中Origin字段值来判断是否允许跨域请求通过。

具体实现方法是：在响应头Access-Control-Allow-Origin字段中设置指定的域名，表示允许这些域名的跨域请求。如果请求头中Origin字段的域名包含在这些域名中，则可以实现跨域请求，否则不通过。

常见的非简单请求：

1）请求方法为：PUT、DELETE.

2）发送JSON格式的ajax请求。

3）http中带自定义请求头。

非简单请求在发送http请求时，会预先发送一次“预检”（OPTIONS）请求。预检请求会事先询问服务器，当前域名是否在服务器允许的范围内，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复后，浏览器才会真正发出请求，否则就会报错。

一旦服务器通过了“预检”请求，在预检期内，浏览器不用发送另一条预检请求。以后每次浏览器正常请求CORS请求，就跟简单请求一样。会有Origin字段，响应头里也会有对应的Access-Control-Allow-Origin字段。

解决方法：

1、服务端通过nginx配置解决跨域问题：

 Access-Control-Allow-Origin 表示哪些请求源是可以访问的，该字段也可以设置为 “*” 表示允许任意跨源请求。$http_origin是nginx取请求中header的origin的值。

Access-Control-Allow-Methods 表示服务器允许客户端使用 PUT、DELETE 方法发起请求，可以一次设置多个，表示服务器所支持的所有跨域方法，而不单是当前请求那个方法，这样好处是为了避免多次预检请求。

Access-Control