首页 > 其他分享 >关于前后端交互,取header的尴尬

关于前后端交互,取header的尴尬

时间:2023-09-04 21:33:51浏览次数:28  
标签:Control 返回 匹配 文件 前端 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-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。这些头部信息可以被JavaScript代码直接访问,而不需要额外的配置

问题解决:

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

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

标签:Control,返回,匹配,文件,前端,header,尴尬,交互
From: https://www.cnblogs.com/isyues/p/17678094.html

相关文章

  • 智能座舱HMI自动化测试之语音交互专项测试
    随着人工智能和物联网技术的迅猛发展,智能座舱已经成为现代汽车中的重要组成部分。语音交互作为智能座舱的核心功能之一,正日益受到用户和汽车制造商的关注。车载语音交互具备的独特优势:降低驾驶者对车内设备的操作依赖、增加驾驶安全系数,完善车载语音的用户体验,保证语音的准确......
  • Windows隐藏nginx的版本,去掉header中的server后面的内容
    一、隐藏nginx的版本,只需要修改nginx的配置文件,重启nginx即可打开nginx所在文件下的conf文件夹下的nginx.conf修改server节点下的 server_tokens改为server_tokensoff;如果没有,添加即可; 二、去掉header中的server后面的内容想将上面截图中的server里面的ngxin也去掉,需......
  • D. More Wrong 交互 思维 逆序对
     题意:这是一道交互题,它手上有个1到n的排列,但你不知道。每次询问你可选择lr,它会告诉你lr这个区间上的逆序对的数量,而这次询问的代价就是区间长度的平方。你要通过询问找出最大的数所在的位置,并且你询问的总代价不能超过5*n的平方。思路:先把n划分为n/2个长度为2的区间,然后询问......
  • Cesium学习笔记9——鼠标交互绘制
    html代码1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="utf-8"/>5<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>6<metaname="view......
  • 火山引擎 DataLeap 助你拥有 Notebook 交互式的开发体验
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群Notebook是一种支持REPL模式的开发环境。所谓「REPL」,即「读取-求值-输出」循环:输入一段代码,立刻得到相应的结果,并继续等待下一次输入。Notebook通常使得探索性的开发和调试更加便捷,在Noteboo......
  • 使用SpringBoot实现网页版交互式增删改查
    1、新建项目选中以下几个DevelopTools:2、引入依赖<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>......
  • Docker非交互式运行命令
    Docker交互式shell-interactiveshelldockerexec最常见的用法。你可以使用-it参数启动一个交互式shell,如/bin/bash或/bin/sh,然后在容器内部执行命令非交互式执行--用来执行预先设定的命令单个命令脚本和单个命令执行脚本的shell都是“非交互式”的,但......
  • 20 JavaScript和HTML交互
    20JavaScript和HTML交互在HTML中可以直接在标签上给出一些事件的触发.例如,页面上的一个按钮.<inputtype="button"value="点我"/>我们能够知道此时在页面中会产生一个按钮.但是该按钮无论如何进行点击.都不会触发任何事件.但,此时我要告诉你,人家其实触发了.只是......
  • 黑魂234 交互作用事件(正面处决)
    在InteractionManager脚本里,修改成这样:添加一个新的列表存放ecastm的物件,需要的留下,不需要的进行移除。private改成public。 ActorManager脚本改成这样: 碰撞触发物体后按下KeyF(C键)会显示绑定EventCasterManager的EventName。在DirectorManager脚本写下这个新的代码:就是把......
  • Parallels Desktop 19 for Mac 发布, 简化 macOS 和 Windows 交互
    ParallelsDesktop19forMac发布,简化macOS和Windows交互ParallelsDesktop19BusinessEdition请访问原文链接:https://sysin.org/blog/parallels-desktop-19/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgAugust21,2023Mac爱好者大家好,这是多么令......