跨域情况详解

1、当发送请求的时候，会涉及到两个地址

当前页面的地址 和 想要请求的地址

2、浏览器有一个同源策略（协议、域名、端口）

当有一个不同时就会触发浏览器的同源策略

3、触发同源策略的请求我们叫做跨域

4、跨域请求的解决方案

=> jsonp

-> 利用了 src 属性不受同源策源的影响    

 -> 利用了 script 标签会把请求回来的内容当作 js 代码来执行    

 -> 要求服务器返回一段可以执行的 js 代码（函数名（数据））    

 -> 要求前端提前准备好这个被执行的函数(回调函数)     

-> 要求前端以参数的形式把这个被执行函数的函数名传递到后端

=>服务器代理

-> 利用一个正向代理的机制来实现      

         //正向代理 特点：数据服务器不知道哪个客户端在请求，只能知道是代理服务器在请求， 隐藏客户端（客户端跨域）       

        //反向代理 特点：客户端不知道真正的服务器地址，你也不知道是哪一个数据服务器在给 你返回数据(负载均衡  |  隐藏服务器地址)     

-> 任何一台服务器都可以做代理        

 => apache 服务器代理 http 协议是免费的        

 => apache 服务器代理 https 协议需要证书        

 => 我们配置代理使用 nginx 服务器来配置代理

=>cors - 跨域资源共享

 => 因为跨域请求，不是请求发不出来            

=> 实际上：请求已经发送了，而且到了服务器，响应页回到浏览器了            

=> 但是浏览器判断是 非同源位置，不允许使用这个服务器给回的数据

重点：深入解析cors跨域

jsonp的劣势：只能发送get请求，而且有安全隐患（被人注入恶意代码）

cors ： 全程跨域资源共享，它允许浏览器向跨源服务器发送XHR请求，从而克服了AJAX只能同源使用的限制

cors 需要浏览器和服务器同时支持，整个cors通信过程，cors代码和正常的ajax没有什么区别，浏览器一旦发现跨域请求，就会添加一些附加的头信息

浏览器将cors请求分成两类：简单请求和非简单请求（浏览器对这两种请求的处理不一样）

简单请求

对于简单请求，具体来说就是在请求头中增加一个origin字段，如下：

Origin: http://localhost:2332

表明本次请求来自那个源，即当前请求的协议、域名、端口

浏览器根据这个字段，决定是否同意这次请求

如果Origin指定的源不在允许范围之内,服务器就会返回一个正常的HTTP回应,然后浏览器发现头信息中没有包含Access-Control-Allow-Origin 字段,就知道出错啦,然后抛出错误,反之则会出现以下字段：

Access-Control-Allow-Origin * ；(*为所有) 、 或者有一个白名单

非简单请求

非简单请求的CORS请求是会在正式通信之前进行一次预检请求

浏览器先询问服务器，当前网页所在的域名是否可以请求服务器，以及可以使用哪些http动词和头信息，只有得到正确的答复，才会进行正式的请求

"预检"使用的请求方法是 OPTIONS , 表示这个请求使用来询问的

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS的头相关信息,这是浏览器就认定,服务器不允许此次访问,从而抛出错误

当预检请求通过之后发出HTTP请求,还有就是一旦通过了预检请求，接下来就和简单请求一样了,会有一个Origin头信息字段。