JavaScript 无法获取响应 header 的 Content-Disposition 字段

问题：
发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。
但是通过查看控制台，header 里确实有这个属性：
在这里插入图片描述
在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？

原因：
根据MDN文档：Access-Control-Expose-Headers
默认情况下，header 只有7种 simple response headers （简单响应首部）可以暴露给外部：

名称
Cache-Control	通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制
Content-Language	说明访问者希望采用的语言或语言组合，这样的话用户就可以根据自己偏好的语言来定制不同的内容
Content-Length	指明发送给接收方的消息主体的大小，即用十进制数字表示的八位元组的数目
Content-Type	告诉客户端实际返回的内容的内容类型
Expires	响应头包含日期/时间，即在此时候之后，响应过期
Last-Modified	包含源头服务器认定的资源做出修改的日期及时间
Pragma	HTTP/1.0 中规定的通用首部，用来向后兼容只支持 HTTP/1.0 协议的缓存服务器

这里的暴露给外部，意思是让客户端可以访问得到，既可以在 Network 里看到，也可以在代码里获取到它们的值。

上面问题提到的 content-disposition 不在其中，所以即使服务器在协议回包里加了该字段，但因没“暴露”给外部，客户端就“看得到，吃不到”。

而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。所以如果想要让客户端可以访问到其他的首部信息，服务器不仅要在 header 里加入该首部，还要将它们在 Access-Control-Expose-Headers 里面列出来。

解决：
服务端：

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)

成功设置后，服务台 Network 可以看到：
在这里插入图片描述
这样一来，客户端就能获取到响应 header 的 Content-Disposition 字段的值了。

eg: 附一份 jersey 的后台例子

package com.howtodoinjava.jersey;
 
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
 
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.WebApplicationException;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import javax.ws.rs.core.StreamingOutput;
 
@Path("/download")
public class JerseyService 
{
    
    
    @GET
    @Path("/pdf")
    public Response downloadPdfFile()
    {
    
    
        StreamingOutput fileStream =  new StreamingOutput() 
        {
    
    
            @Override
            public void write(java.io.OutputStream output) throws IOException, WebApplicationException 
            {
    
    
                try
                {
    
    
                    java.nio.file.Path path = Paths.get("C:/temp/test.pdf");
                    byte[] data = Files.readAllBytes(path);
                    output.write(data);
                    output.flush();
                } 
                catch (Exception e) 
                {
    
    
                    throw new WebApplicationException("File Not Found !!");
                }
            }
        };
        return Response
                .ok(fileStream, MediaType.APPLICATION_OCTET_STREAM)
                .header("content-disposition","attachment; filename = myfile.pdf")
                .header("Access-Control-Expose-Headers", "Content-Disposition")
                .build();
    }
}

JavaScript 无法获取响应 header 的 Content-Disposition 字段

Guess you like