接收后台request-header参数问题

最近项目里，生产环境遇到跨域的问题.
本地是利用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