前端获取自定义响应头数据

已于 2022-07-01 10:41:11 修改
阅读量3.8k 收藏 4
点赞数
文章标签： 服务器 前端 运维
于 2022-06-30 10:37:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renners/article/details/125386420
版权
本文介绍了在使用RustFull架构风格时，如何处理前端获取自定义响应头数据的问题。在.NET Core后端设置自定义响应头后，前端遇到无法获取数据的困境。解决方法包括在IIS服务器上配置Access-Control-Expose-Headers，允许访问自定义响应头x-pagination。完成配置后，前端可以通过代码获取到自定义响应头数据，避免发布后出现功能失效的情况。
摘要由CSDN通过智能技术生成

近期在使用.netcore的过程中，接触到了RustFull的架构风格，以往在做列表分页时，基本都是将分页数据和列表数据统一放了结果集中以json的格式的返回，但是RustFull风格则是将分页信息相关数据和列表数据分离，列表数据放在结果集中，分页数据放到相应头中，如下图所示：

 但是在编写好后端代码后，发现响应头中并没有数据，或者是响应头中有数据，但前端代码却无法获取；此时在前端折腾是没用的，只能在服务器上做相应的处理，由于我在后端自定义的相应头字段名称为“x-pagination”，因此需要在服务器上设置允许自定义响应头x-pagination值允许访问，步骤如下：

1、打开IIS，找到对应项目的HTTP响应标头，点击并打开

2、点击右上角添加按钮，分别在弹出框名称和值中输入 Access-Control-Expose-Headers和

x-pagination，这里如果有多个自定义响应头标签，可以以英文逗号进行分割

 Access-Control-Expose-Headers：x-pagination

最低0.47元/天 解锁文章
Renners
关注
python如何获取请求头的数据
这家伙很懒，什么都没有留下
05-27 1896
HTTP请求头是由一系列字段和值组成的，它们描述了一个HTTP请求的属性。常见的请求头字段包括Host、User-Agent、Accept、Accept-Encoding、Referer、Cookie等。这些字段提供了关于请求来源、客户端类型、可接受的响应类型、压缩方式、引用页面以及用户会话状态等信息。HTTP请求头在客户端与服务器之间的通信中扮演着重要角色。客户端通过发送带有特定请求头的HTTP请求来告知服务器其期望的响应类型和格式。服务器则根据请求头中的信息来决定如何处理请求并生成相应的响应。
跨域情况下前端获取response header的问题
m0_37714008的博客
07-13 4111
1、问题原因 * 前端发送请求下载文件，在Response Headers里通过js获取响应头里的Content-Disposition字段的值，从中分离出文件名 * 但是通过查看NetWork控制台确实是能看到content-disposition,但是在响应拦截器里用js headers["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？ 2、原理 Access-Control-Expose-Header
前端获取response响应头的所有数据/信息
热门推荐
艾欢欢的博客
08-31 3万+
前端默认只能获取以下响应头信息 Cache-Control Content-Language Content-Type Expires Last-Modified Pragma 如果想获取到响应头其他数据，需要在服务器端设置 Access-Control-Expose-Headers : 'Authorization' 这样前端就可以获取响应头的其他信息了（包括自定义的响应头）。 举个栗子：...
SpringBoot开发——获取HTTP请求头(Header)的三种方法
最新发布
bjzhang75的博客
09-18 2502
SpringBoot获取HTTP请求头(Header)的三种方法
前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览
freddy的博客
01-05 2148
【代码】前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览。
前端如何获取响应头Content-Disposition中的filename
jojoyoyo88的博客
04-13 5356
后端在返回文件流时，将文件类型放在了响应头中，需要前端获取filename后手动添加文件名后缀。
Vuejs之axios获取Http响应头
weixin_34150830的博客
04-19 5423
今天在开始接入后端Api 就遇到了一个问题了 在用 axios 获取 respose headers 时候获取到的只有的 Object { cache-control:"private, must-revalidate", content-type:"application/json" } 下面是服务器返回的响应头， 我...
vue在响应头response中获取自定义headers操作
10-15
Vue.js 是一款流行的前端框架，用于构建用户界面。...总结，本文讲解了Vue中如何在响应头中获取自定义headers，以及`token`在前端存储和使用的方法，这些都是Web开发中确保安全性及优化性能的重要实践。
前端20套可视化数据展示模型.rar
07-05
因此，前端开发者需要了解如何与RESTful API交互，获取并展示实时数据。 总的来说，这个“前端20套可视化数据展示模型”资源为学习和实践数据可视化提供了丰富的实例，涵盖了前端开发中的许多关键知识点。无论是...
获取响应请求头里的信息
m0_47999208的博客
02-02 648
如图所示这是一个导出excel的接口，后端响应头部，要获取Content-Disposition里的值，由于命名问题，没有办法用res.Content-Disposition的方式获取它的值。很奇怪，非要搞成小写才行。
js 获取请求响应头的数据
PrimaryColor
09-30 8119
如图，我们发了一个ajax请求，需要获取后端传递在响应头中的数据。 代码： var req = new XMLHttpRequest(); req.open('GET', document.location, false); req.send(null); var headers = req.getAllResponseHeaders().toLowerCase(); alert(headers); 效果图： ......
Java获取响应头response header
12-22
package com.bighai.forTest; import java.io.IOException; import java.net.URL; import java.net.URLConnection; import java.util.Map; import java.util.Set; public class CheckHttpResposneHeaders { public static void main(String[] args) throws IOException{ URL url = new URL("http://pic.qihoo.com/b
vue2 使用axios获取服务器响应头(前后端分离)
难受受同学的博客
10-30 5038
在vue使用axios获取服务器自定义响应头
前端学习（2604）：增加响应头可以获取数据
歌谣的博客
11-17 376
关于前端从response header中获取其属性
wanghui_0924的博客
09-10 1万+
最近才发现，原来从后台取值不仅仅只有其返回值，还可以从response header中获取自己需要的属性，比如服务器的时间；比如下载文件时文件的名字（but这里面是有个小水坑的） 今天主要解决的就是，为什么有的时候明明看到了服务器给反悔了值，前端缺获取不到！！！ 经过和度妈妈的一番较量，度妈妈才告诉我原因： 因为W3C的xhr中做了限制。规定客户端无法获取response中的et-Cooki...
前端 如何获取response headers 中的set-cookie:_web 前端的一些小问题
weixin_39998541的博客
11-19 9872
关于vue使用axios post发送json数据跨域请求403的解决方法：1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出去的时候发现控制台报错403，返回的信息提示是跨域的问题，但是后台已经对跨域进行了处理，因此出现这个问题并不是后台的问题，需要在前端解决，而且通过查看后台的日志发现后台根本没有接收到请求。2. 查找资料网上...
前端获取不到响应头信息问题
TOTOcbz的博客
12-06 1223
前端获取不到响应头信息
获取响应头信息
zhaoyangjian724的专栏
07-11 1444
取网页返回header 响应header [root@dr-mysql01 test]# cat a3.pl use LWP::Simple; @content = head("http://www.zjcap.cn/"); die "Couldn't get it!" unless defined @content; print "\@
js获取response的header
fwhezfwhez的博客
01-08 2738
console.log(response.headers['key'])
返回一个自定义响应头
07-28
在后端代码中，你可以通过以下方式返回一个自定义响应头： ``` response.addHeader("你自定义的响应头字段名", "你自定义的响应头字段值"); response.setHeader("Access-Control-Expose-Headers", "你自定义的响应头字段名"); ``` 其中，你需要将"你自定义的响应头字段名"替换为你想要设置的自定义响应头字段的名称，将"你自定义的响应头字段值"替换为你想要设置的自定义响应头字段的值。这样，在服务器响应中就会包含你设置的自定义响应头。\[1\] 请注意，在前端获取自定义响应头数据时，你可以使用以下代码： ``` var testdata = JSON.parse(response.headers\["你自定义的响应头字段名"\]); console.log(testdata); ``` 其中，你需要将"你自定义的响应头字段名"替换为你在后端设置的自定义响应头字段的名称。这样，你就可以在前端获取到自定义响应头的数据了。\[3\] #### 引用[.reference_title] - *1* [【已解决】前端无法获取自定义响应头字段](https://blog.csdn.net/weixin_42258128/article/details/121834311)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [前端获取自定义响应头数据](https://blog.csdn.net/Renners/article/details/125386420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值