关于前后端交互,取header的尴尬
阅读原文时间:2023年09月05日阅读:1

背景:

最近在写一个接口的时候,需求是这样的,上传excel,匹配项目有多少个字段匹配上了,如果匹配上了在单元格上标注绿色背景,然后返回excel文件和匹配的详细。

首先这个excel文件,后端是不会去保存的,所以无法直接返回文件链接,然后需要返回一个json,告诉前端有多少行是匹配上了的,中匹配多少个,高匹配多少个,总多少个等信息

因为我们项目上有别的同事写好的工具类,传入workbook对象返回文件流给前端,文件返回搞定了,json怎么样返回给前端呢,我灵机妙用,既然content-type为文件流,Responebody被占用了,那我就增加一个header,让前端去拿这个header,接口吭哧吭哧写好了,自测postman也没有问题。OK提交代码了

前端死活都拿不到header的值,我还说,肯定是你的问题,postman、控制台网络都可以看到,为什么你取不到,肯定是你的问题。然后前端苦苦换方法尝试,都没有效果,没办法了,我自己写了个原生xhr去发生请求,发现,真取不到啊,奇怪得很。

然后我查阅资料,发现还真是我自己的问题,header上的设置,Access-Control-Expose-Headers看名字就知道这个的作用,

Access-Control-Expose-Headers 是一个CORS(跨源资源共享)头部,用于在浏览器端控制哪些响应头部信息可以被JavaScript代码访问。它指定了在跨源请求中,响应的哪些头部信息可以被客户端JavaScript代码访问。默认情况下,浏览器只允许访问一些简单的响应头部信息,例如 Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。这些头部信息可以被JavaScript代码直接访问,而不需要额外的配置

我直接设置可以访问,不想全部设置的可以指定header名字,多个逗号分隔

response.setHeader("Access-Control-Expose-Headers", "*");