既然Nginx能单边解决跨域，那为什么浏览器还要有跨域的存在？

上周帮一家公司优化代码时，顺手把跨域的问题解决了，这篇文章，我们聊聊Springoot项目处理跨域的四种技巧。

<>1什么是跨域

我们先看下一个典型的的：

<>同源是指：<>协议、域名、端口号完全相同。

下表给出了与L://training/dir/page.html的源进行对的示例:

当用户通过浏览器访问应用（://.training）时，调用接口的域名非同源域名(://api.training)，这是显而易见的跨域场景。

<>2理解CORS

<>CORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresocesharing）,它需要浏览器和同时支持他，允许浏览器向跨源发送XMLHttpRequest请求，从而克服AJAX只能<>同源使用的。

<>跨域资源共享标准新增了一组首部字段，允许声明哪些源站通过浏览器有权限访问哪些资源。

规范要求，对那些可能对数据产生副作用的请求方法（特别是GET以外的请求，或者搭配某些MIME类型的POST请求），浏览器必须首先使用OPTIONS方法发起一个预检请求（preflightrequest），从而获知服务端是否允许该跨域请求。

确认允许之后，才发起实际的请求。在预检请求的返回中，端也可以通知客户端，是否需要携带身份凭证（包括Cookies和认证相关数据）。

<>01简单请求

当请求<>同时满足如下条件时，CORS验证机制会使用简单请求，否则CORS验证机制会使用预检请求。

使用GET、POST、HEAD其中一种方法；只使用了如下的安全首部字段，不得人为设置首部字段；

AcceptAccept-LanguageContent-LanguageContent-Type仅限三种之一：text/plain，multipart/form-data，application/x-www-form-lencoded：HTML头部headerfield字段：DPR、Download、Se-Data、Viewport-Width、WIdth

请求中的任意XMLHttpRequestUpload对象均没有注册任何事件；XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问；请求中没有使用ReadaleStream对象。

简单请求模式，浏览器直接发送跨域请求，并在请求头中携带Origin的头，表明这是一个跨域的请求。端接到请求后，会根据自己的跨域规则，通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头，来返回验证结果。

<>02预检请求

浏览器在发现页面发出的请求非简单请求，并不会立即执行对应的请求代码，而是会触发预先请求模式。预先请求模式会先发送preflightrequest（预先验证请求），preflightrequest是一个OPTION请求，用于询问要被跨域访问的，是否允许当前域名下的页面发送跨域的请求。在得到的跨域授权后才能发送正的请求。

OPTIONS请求头部中会包含以下头部：

收到OPTIONS请求后，设置头部与浏览器沟通来判断是否允许这个请求。

如果preflightrequest验证通过，浏览器才会发送正的跨域请求。

<>3Nginx配置

我们可以不用配置Springoot项目，可以在反向层Nginx配置Cros，典型配置如下图：

<>4配置类实现addCorsMapping接口

Springoot中新增一个配置类CorsConfig.ja，继承WeMvcConprAdapter或者实现WeMvcConpr接口，项目启动后，会自动读取配置。

<>5CorsFilter过滤器模式

下图是SpringMvc模式里，过滤器，，的执行顺序。

CorsFilter过滤器模式的优点是：优先级高，可以规避代码中业务异常导致adCorsMappings方法失效的问题。

我们需要定义一个corsFilter方法，@ean注解表示此方法返回一个Springean，该ean将由Spring容器。

corsFilter()方法定义了一个FilterRegistrationean，这个ean是用来注册CorsFilter的，后者用于处理CORS请求。

<>6网关模式

在微服务架构体系中，网关是非常核心的组件。API网关可以做鉴权，限流，灰度等，同时可以配置CORS。内部服务端不用特别关注跨域这个问题。

<>因此假如是SpringCloud体系，我们只需要配置SpringCloudgateway的跨域即可。

s://developer.mozilla.org/zh-CN/do/We//CORS