后端说：只是你不懂怎么用 headers!

最新推荐文章于 2024-07-26 03:02:31 发布
最新推荐文章于 2024-07-26 03:02:31 发布
阅读量5.2k 收藏 4
点赞数 1

（点击上方公众号，可快速关注）


来源：esbook

https://www.jianshu.com/p/86c92387351f


事情是这样的，上一个项目我们的后端提供的接口，一次性返回了所有数据给我，分页功能是前端自己完成的。

那么这次来的新项目，换了个后端，写了另外的接口，我做项目的时候，还是用的之前的前端分页组件，但是测试说前端的分页没有做？

于是乎，我就问后端，你返回给我的数据里面没有统计总数啊不能返回给我么？

640?wx_fmt=png

这样的回答没毛病，毕竟全部一次性返回给我，sql 查询是挺费事的，不过这只不不过是一个 demo 系统，演示给客户看的，再说目前会有多少条数据，即便是百万条数据，mysql 的查询性能我想也不会很差，毕竟您不要做一下 sql 优化吗？

640?wx_fmt=png

果然是高手，把分页数据 存在 response.header 里面了，顺便多说一句，我们这个是前后端分离的项目，因为存在 cros 跨域，所以，我这边获取 response.headers 只能获取以下的数据

640?wx_fmt=png

并不能完全获取后端自定义的 response header 的所有数据，科普了一下原来是这样的

640?wx_fmt=png

我问后端，你设置了吗，后端说不用设置啊，说另外一个同事可以取（据我说知另外一个同事使用的 swagger）你用 swagger 同一个端口、域名，存在跨域吗，我想问你？你还好意思让我用 swagger 测试你的接口，那 tm 当然不会存在跨域问题，当然可以在 response.headers 里面得到你的分页数据

640?wx_fmt=png

你返回给我的是这样的数据，让我猜想一下，可能是用了统一的方法，你不好去改后端返回的数据，或则还是你比较懒。就 是不想把分页数据，通过正常 respone.text 传给我，还是你故意显示你的技术牛逼！存在 header 里面？

640?wx_fmt=png

呵呵，此时后端嘲讽我 『只是你不懂怎么用 header』

640?wx_fmt=png

问我是 js 么？我一个攻城狮，发送 ajax 请求，你问我是 js 么，还要教我，不好意思，这点尊严还是有的，既然你这么懂 header，那么我前端传递参，也把当前的页码，page 参数（后端需要的参数），存在 header 里面

640?wx_fmt=png

其实本来应该放在 query string 里面的，你既然喜欢在 response.headers 存总页码，那就别怨我在

request.headers 里面给你传递 page，毕竟我不懂 header~~~

顺便提一下，我存在 headers里面了，我测试分页，发现不管我点击哪个页面，后端返回的总是第一页的数据，那么我敢断定，后端取参数，肯定不是从 headers 里面取的 page

本来easy 的事情，你非要搞这么复杂，何必呢，跟我显摆什么呢。。。

=======================================================

今天又更新了，我们继续看热闹


640?wx_fmt=png

说到这里我就笑了，该后端说，他的 response.header 存放分页 数据 是 response 的一部分。是正常操作

我前端 用 request.headers 传递 页面 就是不符合 restful 规范了？

首先他说的这个 restful 规范，我就笑了，人家 restful 是一种风格而已，

退一步说，你后端传 response.headers 就可以，我前端 就不行了，不符合规范了？我看是你取不到页码了吧！！！

导致你的 query 语句一直取的默认为第一页的数据，辣鸡！

640?wx_fmt=png

因为上个项目 是另外一个后端，做的也是一个 demo，一次性返回20多条数据给我，前端自己做的分页

跟这个人合作，第一次，我就问能不能一次性全部给我，不行就拉倒。现在借着这个话题跟我扯性能问题

请我一下现在做的这个 demo 就10几条数据，你跟我谈什么性能？你确定你真的懂 sql 性能，

说我态度有问题，你接口文档上有跟我说分页写在了reponse.header 里面？你接口文档上面有说要传递 page 参数么？

swagger 上面就 tm 一个 请求，一个 type，又告诉前端传递正确参数么？你返回的 response.headers 里面的分页数据又在哪里？

640?wx_fmt=png640?wx_fmt=png

死猪不怕开水烫，文章一开始我就跟他说了如果后端设置了自定义的 response.headers，服务器端要配置一下，

否则前端是拿不到的，还不行，你现在怎么知道去设置了？你刚才不是 振振有词说 为什么别人可以你不可以吗？

那你 tm 如果不按照我说的去配置，你 tm 取给我看看？

你自己说的话，是不是啪啪啪打脸？

640?wx_fmt=png

说了这么多，你就是不愿意把分页放在 response .text 里面是吧，坚持放 header 里面是吧

640?wx_fmt=png

还什么基于 yii 分页序列化，分页序列化跟你返回的数据格式有毛关系，你 tm 说白了，就是不想改返回的数据格式

你认为现在就这么处理分页是把，还是把分页数据存 headers 里面对把，

得了，那老子前端就给你传 request.headers里面 告诉你 page 就在那，你爱取不取，我 tm 就是有情绪了，咋啦，

你不是说我不懂 headers 么，还 tm 要教我 js？呵呵。。。。。



【关于投稿】


如果大家有原创好文投稿，请直接给公号发送留言。


① 留言格式：
【投稿】+《 文章标题》+ 文章链接

② 示例：
【投稿】《不要自称是程序员，我十多年的 IT 职场总结》：http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~





觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

640?wx_fmt=png

640?wx_fmt=jpeg

前端大全
关注
智能SQL生成：后端技术与LLM的完美结合
沉迷写代码的程序猿的博客
02-25 1483
如果各位有关注一些技术文章，难免会注意到这几年有一个词非常火，没错这就是“大模型”！那大模型是什么？有什么用呢？“大模型”是可以指任何规模较大、参数众多的机器学习模型，不仅限于自然语言处理（NLP），也可以包括计算机视觉、语音识别等其他领域的模型。大模型的特点是它们通常需要大量的数据来训练，以及相对较大的计算资源。大模型的用途十分广泛，在很多领域都有不错的应用价值：自然语言的生成和理解：大模型可以根据用户的问题生成连贯的文本回答、或是总结某些文章。ChatGPT就是一个不错的例子。图像的处理。
面试题：460道Java后端面试高频题答案版「模块九：Spring」
javalingyu的博客
05-27 582
Spring 写在前面 相信对于 Spring 这个模块，只要是做过 Java 开发的同学都是不陌生的，或多或少都使用过 Spring 体系的框架。对于平时自己做点小项目会写配置文件可能就行了，但是对于秋招面试只懂配置还是不行的。要明白整个框架的运行机制和流程。 这里需要说下“框架”这个问题，现在很多人的文章都说框架不重要，计算机基础才是最重要的，这一点我是非常赞同的。但是这个角度是从一个长远的角度看，但是对于一个正在秋招或者即将秋招的同学来说，如果你完全不懂 Java 开发的框架，估计会在这个上面栽
关于前后端分离的思考和总结
bobozai86的博客
12-28 1160
对目前的web来说，前后端分离已经变得越来越流行了，越来越多的企业/网站都开始往这个方向靠拢。那么，为什么要选择前后端分离呢？前后端分离对实际开发有什么好处呢？我之前一直对前后端分离的思想一直很模糊，最近恰好碰上公司的项目进行重构，也采用前后端分离。所以就根据自己在实际项目中的开发，总结自己对于前后端分离中遇到的一些疑惑。 前言 首先在此之前，我跟大多数人一样，心中有如下疑问？ 什么是前后端...
前端向后端传参报415_前后端上线必检清单
weixin_31163527的博客
12-09 135
一、前端上线必检清单 回退、跳转是否正确 iOS android 浏览器 节流防抖是否处理 微信分享标题敏感字 红包 钱等 是否适配 320~750 320 480 640 iphonex 是否处理类型转换、非空判断 转换页面加载 loading 处理 无数据、异常、空白页展示处理 移动端扩大点击区域 合理的鼠标光标 是否有做分页 文字超出处理 图片相关 图片是否有做无损压缩 最多使用 2x(两倍...
java调用api接口加headers
最新发布
weixin_32200323的博客
07-26 80
Java调用API接口加Headers的详细教程 作为一名刚入行的开发者，你可能会遇到需要使用Java调用API接口并添加自定义Headers的情况。本文将详细指导你如何实现这一功能。 步骤概览 以下是实现Java调用API接口加Headers的步骤概览： 步骤 描述 1 引入必要的库 2 创建HttpC...
前后端分离 SpringSecurity在拦截器中设置responseHeader前端无法获取
YWwXxx的博客
01-16 1130
Vue+SpringBoot前后端分离 SpringSecurity在拦截器中设置responseHeader前端Axios接受请求 无法获取responseHeader
Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED."
热门推荐
苏云南雁的博客
02-20 1万+
解决跨域时采用了cors，VUE中用了原生js写法，post请求报了这个错 这个问题是由于需要先打开XMLHttpRequest 错误写法： var xhr = new XMLHttpRequest(); //设置请求的类型及url //post请求一定要添加请求头才行不然会报错 xhr.setRequestHeader("Content-type","application/x-...
前后端分离时，response.header跨域传值问题
qq_39572257的博客
05-02 2453
问题： 在前后端分离的项目中，后端通过response.header向前端传自定义数据，前端无法从header中获取。 原因： 默认跨域情况下，浏览器中response的header只返回： Cache-Control Content-Language Content-Type Expires Last-Modified Pragma 解决方法： 方法一： 在后端配置。reponse的...
Vue-axios-post数据后端接不到问题
Caeser110的博客
01-10 3570
1 前言 最近在前后端联调的时候发现了一个问题，可能自己平时不注意发送的内容格式，导致解决问题的路上，走了很多弯路，尤其是在刚刚懂了一点Vue知识之后，发送请求的各种花式写法也是让人头大，我在这把我踩到的坑给大家介绍一下吧。 2 问题 这个问题是我前端登录的时候向后端发生post请求。在使用这个接口前，我使用 postman 确认过了几次，接口传参是没有问题的，而且使用params或者body传参...
关于 HTTP 后端人员需要了解的 20+ 图片！
我没有三颗心脏的博客
02-27 261
前言 当您网上冲浪时，HTTP 协议无处不在。当您浏览网页、获取一张图片、一段视频时，HTTP 协议就正在发生。 本篇将尽可能用简短的例子和必要的说明来让您了解基础的 HTTP 知识。 目录： 什么是 HTTP？ HTTP 简史； HTTP 与 HTTPS； Part 1. 什么是 HTTP？ 互联网是有关 web 客户端和 web 服务器之间的通信。 HTTP（HyperText Transfer Protocol）又叫超文本传输协议。本质上就是一个协定好双方如何进行交流沟通的约定。 这就好比我在
超详细使用vite和egg实现前端后端分离项目的搭建，简单易懂
weixin_59530318的博客
08-09 527
超简单超详细实现前后分离项目的搭建
response 设置响应头的常用几种方法
hanshangzhi的博客
05-16 6416
response 设置响应头的常用几种方法      1.Location  的用法         response.setStatus(302)//临时定向响应码      response.setHeader("Location", "/day03_00_ResponseHeader/servlet/ResponseHeaderDemo2");///day03_00_Respo
客户端读取响应头+后端读取请求头的那些事
qq_44859233的博客
05-19 1643
在一些特殊场景中，我们在客户端想要去获取服务端接口设置的一些自定义响应头，服务端该如何处理，客户端才能取到这些自定义响应头的值呢？特殊场景，我这里也举例一下，原生页面webView嵌入web页面。这个时候如果在app内，用户已经登录了，就需要h5页面能够拿到用户信息，但是登录信息在app中，所以需要原生把这个信息传递给h5页面。这个时候会有两种方法，一个是通过接口请求的方式，我们指定尽管是一个页面，在浏览器打开，但其实本质是一个get请求。所以能够通过这个接口传递数据；第二个方法就是与h5页面进行通信。
前端取不到后台返回response里边header内容问题
Angus
07-29 6627
我是在前后端调试下载文件的时候遇到的问题。 我下载文件的方式是返回二进制流。这种方式的话实际上是不能有return的，也就是时候不能把一些内容带给前端。比方说文件名，我们就需要放header里边。但是默认情况下，前端拿不到你定义的header字段。 那么解决方式实际上是比较简单的，我的解决方案如下： response.reset(); response.setHeader("Access-Control-Allow-Origin", "*"); ...
HTTP Headers字段以及作用
liuqinhou的博客
01-02 1393
网络
AJAX/REACT/VUE等获取到的response的header为空；在response中自定义header，并允许前端访问
HiveMe_Hitech
11-02 6793
问题描述： 跨域访问时：response的header需要添加自定义字段ABC，在浏览器的network工具或者postman查看请求，都可以再response的header中发现字段ABC，而通过ajax或者react等查看响应时，header就是为空 解决方案： 后端在返回response时，加上header Access-Control-Expose-Headers 代码如下： ...
前后端分离发起axios请求，前端无法获取response header的内容 问题解决
qq_34267765的博客
04-13 6549
问题 描述：在springboot jwt结合vue axios 做一个验签的功能，后端验签通过 拦截器放行，但是前端无法拿到后端在header的状态码，从而前端响应拦截器无法生效。
ajax和asios请求头headers的作用
weixin_44134588的博客
08-28 1820
headers里面的token是一个长字符串,在登录成功之后会通过回调函数的参数返回, ,headers的作用就是一个钥匙,登录之后的其他所有数据请求操作都要有请求头里面的token字符串才能获得权限; 进行ajax/axios数据请求时 ajax中的token字段在回调函数的参数response中, 而axios的字段在回调函数response里面的data中; 在登陆成功之后,我们可以将token存储在本地,每次进行其他操作的时候在本地读取,这样就避免了每次都要从网络上重新获取token; 使用ajax
写下JAVA后端代码：需求接受前端请求以后按照IO流将文件下载至前端
09-19
### 回答1： 我不会写JAVA后端代码，但是可以提供一些建议：1. 首先，您需要定义一个Servlet，用于接受前端的请求并处理它们。2. 使用Java的I/O流处理请求，以获取文件，并将其发送到前端。3. 最后，您可以使用Java的HttpServletResponse对象来将文件发送到前端。 ### 回答2： 下面是一个示例的Java后端代码，实现了根据前端请求进行文件下载的功能： ```java import org.springframework.core.io.Resource; import org.springframework.core.io.UrlResource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.nio.file.Path; import java.nio.file.Paths; @RestController @RequestMapping("/api/download") public class FileDownloadController { @GetMapping("/{filename}") public ResponseEntity<Resource> downloadFile(@PathVariable String filename, HttpServletRequest request) throws IOException { // 获取要下载的文件路径 String filePath = "/path/to/files/" + filename; Path path = Paths.get(filePath); Resource resource = new UrlResource(path.toUri()); // 根据文件的MIME类型设置响应头 String contentType = request.getServletContext().getMimeType(resource.getFile().getAbsolutePath()); contentType = contentType == null ? "application/octet-stream" : contentType; // 构建并返回响应实体 return ResponseEntity.ok() .contentType(MediaType.parseMediaType(contentType)) .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"") .body(resource); } } ``` 在上述代码中，我们定义了一个名为`downloadFile`的方法，用于处理前端的下载文件请求。该方法使用`@GetMapping`注解来映射请求路径，并通过`@PathVarliable`注解来获取请求中的文件名。 在方法体内，我们首先根据文件名构建文件的绝对路径，并将其封装为`Resource`对象。然后，我们根据文件的MIME类型设置响应头中的Content-Type，并通过`ResponseEntity.ok()`来构建响应实体。 最后，我们设置响应实体的Content-Disposition头，将文件名作为附件提供下载。最后，返回包含文件内容的`Resource`对象作为响应体，完成文件下载过程。 请注意，你需要根据自己的实际情况修改代码中的文件路径和文件类型相关的代码。 ### 回答3： 以下是一个简单的JAVA后端代码示例，用于接受前端请求并通过IO流将文件下载至前端。 ```java @RestController public class FileController { @GetMapping("/download") public void downloadFile(HttpServletRequest request, HttpServletResponse response) { // 获取要下载的文件路径（可以根据前端请求参数或其他方式获得） String filePath = "/path/to/file.ext"; File file = new File(filePath); if (file.exists()) { try { // 设置响应头，指定文件下载方式 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + file.getName()); // 创建输入流读取文件数据 FileInputStream inputStream = new FileInputStream(file); // 创建输出流将文件数据写入 response ServletOutputStream outputStream = response.getOutputStream(); byte[] buffer = new byte[1024]; int len; while ((len = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, len); } // 关闭流 outputStream.flush(); inputStream.close(); outputStream.close(); } catch (IOException e) { e.printStackTrace(); } } else { // 文件不存在的处理逻辑 } } } ``` 这个示例中，我们使用`@GetMapping("/download")`注解将方法映射为接收前端请求的路径。根据实际情况，你可以根据实际需求添加其他的请求映射注解（如`@PostMapping`）。 在方法中，我们首先获取要下载的文件路径，然后创建一个`File`对象。如果文件存在，我们设置响应头，指定文件下载方式，并创建输入流和输出流。 通过读取输入流的数据，并将其写入输出流中，我们实现了将文件数据发送给前端进行下载的功能。最后，记得关闭流。 当然，在实际开发中，你可能还需要处理异常、验证请求、设置文件名等其他逻辑。这个示例只是提供了一种简单的实现思路。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值