Response headers 에 Content-Disposition 안보임 😥Cors 관련인가 ?

---

Cors 설정을 하기 전에 잘 동작했던 액셀 다운로드 / 업로드가 안되기를 시작했다.

너무 슬프다.

 

api  를 호출한다.

 

@Override
protected void buildExcelDocument(Map<String, Object> model, Workbook workbook, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {

    createExcel(workbook, model);
    response.setCharacterEncoding("UTF-8");
    response.setHeader("Content-Disposition", "attachment; filename=\"" + URLEncoder.encode("패턴_업로드_샘플.xlsx", "UTF-8") + "\";");

}

 

여기 스프링단에서 분명히 Content-Disposition 를 설정해줬다.

 

그리고 vue 단에서 Response headers 에 실린 Content-Disposition 를 확인해야 한다.

근데 response 를 console  로 찍어보는데 Content-Disposition가 보이지를 않는다.

 

 이상한 점은 console 로는 찍히지 않지만 network 에는 노출이 된다는 점이다.

 

console.log

 

network

 

뒷단에 response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");

추가해주니까 되었다 ! 

 

@Component
public class SimpleCORSFilter implements Filter{

    private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
    
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
        response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
    
        chain.doFilter(req, res);
    }
}

 

---