关于前后端交互,取header的尴尬
背景:
最近在写一个接口的时候,需求是这样的,上传excel,匹配项目有多少个字段匹配上了,如果匹配上了在单元格上标注绿色背景,然后返回excel文件和匹配的详细。
首先这个excel文件,后端是不会去保存的,所以无法直接返回文件链接,然后需要返回一个json,告诉前端有多少行是匹配上了的,中匹配多少个,高匹配多少个,总多少个等信息
想法:
因为我们项目上有别的同事写好的工具类,传入workbook对象返回文件流给前端,文件返回搞定了,json怎么样返回给前端呢,我灵机妙用,既然content-type为文件流,Responebody被占用了,那我就增加一个header,让前端去拿这个header,接口吭哧吭哧写好了,自测postman也没有问题。OK提交代码了
问题:
前端死活都拿不到header的值,我还说,肯定是你的问题,postman、控制台网络都可以看到,为什么你取不到,肯定是你的问题。然后前端苦苦换方法尝试,都没有效果,没办法了,我自己写了个原生xhr去发生请求,发现,真取不到啊,奇怪得很。
问题原因:
然后我查阅资料,发现还真是我自己的问题,header上的设置,Access-Control-Expose-Headers
看名字就知道这个的作用,有空真的要再去看看http请求基础知识啊!
Access-Control-Expose-Headers 是一个CORS(跨源资源共享)头部,用于在浏览器端控制哪些响应头部信息可以被JavaScript代码访问。它指定了在跨源请求中,响应的哪些头部信息可以被客户端JavaScript代码访问。默认情况下,浏览器只允许访问一些简单的响应头部信息,例如
Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。这些头部信息可以被JavaScript代码直接访问,而不需要额外的配置
问题解决:
我直接设置可以访问,不想全部设置的可以指定header名字,多个逗号分隔
response.setHeader("Access-Control-Expose-Headers", "*");
热门相关:如果能少爱你一点 被捉奸的妻子朋友 坏小子 湿沼泽 我成了暴戾帝君的小娇包