ToB企服应用市场:ToB评测及商务社交产业平台

标题: 关于前后端交互，取header的尴尬 [打印本页]

作者: 滴水恩情 时间: 2023-9-4 22:30
标题: 关于前后端交互，取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", "*");

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)