vue axios无法获取响应头字段

概述

本文记录前后端接口联调时发现的一个问题，并给出解决方案：vue axios无法获取响应头Content-Disposition字段

背景

默认情况下，HTTP Header只有六种Simple Response Headers（简单响应首部）暴露给外部：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

此处的暴露给外部，意思是既可以在 Network 里看到，也可以在前端代码里获取到他们的值。

文件下载是业务开发中极其普遍的一个需求，如Excel文件导出，后端接口方法如下：

private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) throws IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
    workbook.write(response.getOutputStream());
}

如上，对于文件下载类接口，不论是Excel还是Word，一般都是在Content-Disposition里面配置文件名。而Content-Disposition不在其中，所以即使服务器在协议回包里加该字段，但是前端代码获取不到这个数据。

也就是说，此处的Excel导出文件名命名规则是后端业务逻辑，前端只需要下载即可，前端需要知道下载的文件名。

解决

响应首部 Access-Control-Expose-Headers 就是控制暴露的开关，列出哪些首部可以作为响应的一部分暴露给外部。

解决办法：

private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) throws IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    // 配置
    response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
    workbook.write(response.getOutputStream());
}

问题

注意如果有配置跨域，则上面的解决方法无效：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;

/**
 * 跨域配置
 */
@Configuration
public class CorsConfig {
    private static final String ALL = "*";

    @Order(Ordered.HIGHEST_PRECEDENCE)
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // cookie跨域
        config.setAllowCredentials(Boolean.TRUE);
        config.addAllowedMethod(ALL);
        config.addAllowedOrigin(ALL);
        config.addAllowedHeader(ALL);
        // 配置前端js允许访问的响应头
		//	config.addExposedHeader("setToken");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

解决方法：

config.addExposedHeader("Content-Disposition");

参考