解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

在前后端分离的项目中，前端和后端可能是在不同的服务器上，也可以是Docker上，那就意味着前端请求后端Restful接口时，存在跨域情况。

后端在做了通用的跨域资源共享CORS设置后，前端在做ajax跨域请求时，如果需要在自定义请求头中设置类似于Authorization认证属性时，

则该ajax请求就从简单请求变为复杂请求。CORS请求分成两类：1，简单请求。2。非简单请求

1、简单请求

1. 请求方法是以下三种方法之一： HEAD、GET、POST 2. HTTP的头信息不超出以下几种字段： Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。 这就意味着，如果请求中添加了自定义Header，就属于非简单请求，就需要Server端处理预检验（Option）请求。

2、非简单请求 
非简单请求发送请求时，从浏览器端来看是浏览器发送了2次请求，第1次是option方法的请求，是预检请求；第2次是实际的请求。 

浏览器会先发送一个options方法的ajax的预请求。

这时后端需要在拦截器或者过滤器里面设置允许options请求。设置自定义的请求头属性：Authorization

 

 

获取Response的自定义header

如果是跨域请求(CORS)， 自定义的Header会从server端的response headers 带回浏览器，但始终将无法通过代码response.headers.get(“X-TOKEN”)取得， 拦截器或者过滤器必须要添加 “Access-Control-Expose-Headers” 到Response中才行。