最近项目里，生产环境遇到跨域的问题.
本地是利用vue代理直接访问服务器的，测试环境使用了node的express中间件。由于是后台管理系统，登录会使用token，并进行本地刷新与服务器进行验证。
那么问题来了，在本地测试5分钟token会接收后台返回的新token并进行替换。但是在测试根本获取不到新的token，更别说线上了。然而却没发现问题出在哪 o(╥﹏╥)o
走了很多坑，深挖了很多细节，也查了资料。终于~终于 发现
在测试环境打印 response headers获取的内容：
response headers.png
但是后台确实全都返回了，苦恼
image.png
终于明白为啥前端怎么解决在测试环境仍然无结果，前端只能控制发起请求（request）的参数，并不能控制服务端响应（response）的参数，可以选择接收或者不接收。
原来在默认的请求上， 浏览器只能访问以下默认的 响应头
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
如果想让浏览器能访问到其他的 响应头的话 需要在服务器上设置 Access-Control-Expose-Headers
在服务器上要设置 Access-Control-Expose-Headers，关于CORS配置如下：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}
然后在后面添加exposedHeaders属性即可：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").exposedHeaders("token");
}
}
附上其他参数配置，可根据需要配置：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("PUT", "DELETE", "GET", "POST")
.allowedHeaders("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(false).maxAge(3600);
}
}
[vue+后台spring] https://blog.csdn.net/u012534163/article/details/79584694
