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();
    }
}



相关文章
|
6月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
574 0
|
6月前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
76 1
egg.js 24.13sequelize模型-字段限制排序分页
|
6月前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段
|
6月前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
204 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
空气质量在线监测平台JS逆向:请求响应数据加密
空气质量在线监测平台JS逆向:请求响应数据加密
50 0
|
4月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
510 2
|
4月前
|
前端开发 JavaScript Java
前端 JS 经典:如何实现私有字段
前端 JS 经典:如何实现私有字段
23 1
|
5月前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
150 8
|
5月前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段