架构设计-web项目中跨域问题涉及到的后端和前端配置

WEB软件项目中经常会遇到跨域问题，解决方案早已是业内的共识，简要记录主流的处理方式：

跨域感知session需要解决两个问题：

1. 跨域问题

2. 跨域cookie传输问题

跨域问题

解决跨域问题有很多种方式，如使用springboot自带的crossOrigin注解

@CrossOrigin(origins = {"*"}, allowedHeaders = "*")

添加这个注解后，所有的http response头上都会加上
Access-Control-Allow-Origin * 以及
Access-Control-Allow-Headers * 两个头部，这样可以满足CORS的跨域定义，前端看到这两个头部就认定对应的域名接收任何来自或不来自于本域的请求

跨域传递cookie的问题

跨域和跨域传递cookie是两个不同纬度的问题，如果要做到跨域感知session的前提下将cookie也能传上去，这个时候就需要设置另外一个头部。

@CrossOrigin(origins = {"*"}, allowCredentials = "true", allowedHeaders = "*")

使用了 allowCredentials 后 Access-Control-Allow-Credentials 头被设置成 true，同时前端设置xhrField:{withCredential:true} 后，浏览器在前端网络请求内带上对应的 cookie 头部和后端的allowCredentials 配合在一起解决跨域传递 cookie 的问题。如果项目中只使用了get、post方法，而这两个方法在跨域请求中都是可以用的，allowedHeaders 可以不加。

另外当设置了 allowCredentials = “true" 时，origins = {”*"} 就失效了，因为一旦设置了跨域传递cookie 就不能再设置接受任何 origins，而 springboot 的实现方式是返回的 allow origin 取request内的 origin，即前端 html 页面路径。这样就可以实现允许使用了跨域的 origin。

注意：许多浏览器 (safari和最新版本的 chrome) 默认设置不支持携带跨域 cookie，即便代码写成允许，浏览器底层也做了限制，因此在调试的时候可以关闭对应的限制，也可以使用其他跨域处理方式。