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