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

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

问题:

发送协议请求一个文件流,需要在回包里拿到响应头里的 Content-Disposition 字段的值,从中分离出文件名。

但是通过查看控制台,header 里确实有这个属性:

2020062310470442.png

在控制台 Network 里明明能看到,但是在响应拦截器里用 js headers[“content-disposition”] 来获取,但是打印 header 对象里并没有 content-disposition 无法获取,这是什么原因?

原因:

根据MDN文档:Access-Control-Expose-Headers

默认情况下,header 只有7种 simple response headers (简单响应首部)可以暴露给外部:

image.png

这里的暴露给外部,意思是让客户端可以访问得到,既可以在 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 可以看到:

2020062310470442.png

这样一来,客户端就能获取到响应 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();
    }
}



相关文章
|
27天前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
66 0
|
27天前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
44 1
egg.js 24.13sequelize模型-字段限制排序分页
|
27天前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段
|
27天前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段
|
26天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
43 1
|
26天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
19 2
|
27天前
egg.js 24.14sequelize模型-修改和限制字段
egg.js 24.14sequelize模型-修改和限制字段
24 0
egg.js 24.14sequelize模型-修改和限制字段
|
10月前
|
JSON 前端开发 JavaScript
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
50 0
|
27天前
|
JavaScript
|
27天前
|
JavaScript
JS购物车或表格中减号按钮无法响应的问题
JS购物车或表格中减号按钮无法响应的问题