跨域情况下前端获取response header的问题

已于 2022-07-13 11:34:03 修改
阅读量4k 收藏 4
点赞数
分类专栏： vue js 文章标签： 大数据
于 2022-07-13 11:27:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37714008/article/details/125759017
版权
在前端跨域请求中，由于浏览器安全限制，无法直接通过js获取响应header的Content-Disposition字段，导致无法获取文件名。文章介绍了问题原因、Access-Control-Expose-Headers原理，并提供了后端设置和前端代码的解决办法。
摘要由CSDN通过智能技术生成

js无法获取响应header的Content-Disposition字段

注： 前端使用 proxy 代理解决跨域时，本地测试是不会出问题的。打包上线后获取不到文件名

1、问题原因

 * 前端发送请求下载文件，在Response Headers里通过js获取响应头里的Content-Disposition字段的值，从中分离出文件名

 * 但是通过查看NetWork控制台确实是能看到content-disposition,但是在响应拦截器里用js headers["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？

 2、原理 Access-Control-Expose-Headers

MDN文档查看：Access-Control-Expose-Headers

响应首部 Access

最低0.47元/天 解锁文章
GuaX
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端获取自定义响应头数据
Renners的博客
06-30 3761
前端获取自定义响应头中的数据
vue页面返回消息头获取_vue在响应头response中获取自定义headers操作
weixin_39602560的博客
12-19 1331
日常开发，我们可能会为了安全问题，保证第三方无法通过伪造返回报文欺骗前端，需要在返回报文中添加自定义参数，用于验证身份，后端添加自定义参数，前端校验自定义参数通过后才会执行相应的操作。系统为了安全会去掉自定义头，如果不做任何处理，前端无法通过javascript访问自定义头，所以需要在接口返回中添加这样的操作。response['Cookie'] ='13231231231' #自定义头添加后接口...
获取返回的response Header和response流
xsg2357的博客
04-18 675
获取response里面的字节流丙保存为文件。获取response里面的header。
前后端分离项目中，后端无法获取 content-disposition
最新发布
2302_78953577的博客
07-03 346
脑壳儿痛得很~
关于前端从response header中获取其属性
wanghui_0924的博客
09-10 1万+
最近才发现，原来从后台取值不仅仅只有其返回值，还可以从response header中获取自己需要的属性，比如服务器的时间；比如下载文件时文件的名字（but这里面是有个小水坑的） 今天主要解决的就是，为什么有的时候明明看到了服务器给反悔了值，前端缺获取不到！！！ 经过和度妈妈的一番较量，度妈妈才告诉我原因： 因为W3C的xhr中做了限制。规定客户端无法获取response中的et-Cooki...
前端获取response响应头的所有数据/信息
热门推荐
艾欢欢的博客
08-31 3万+
前端默认只能获取以下响应头信息 Cache-Control Content-Language Content-Type Expires Last-Modified Pragma 如果想获取到响应头其他数据，需要在服务器端设置 Access-Control-Expose-Headers : 'Authorization' 这样前端就可以获取响应头的其他信息了（包括自定义的响应头）。 举个栗子：...
java 前后端分离，跨域问题及获取响应头信息
wangshenglong6的博客
04-12 2050
java 前后端分离，跨域问题及获取响应头信息跨域问题解决方案 ：基础filter 实现doFilter方法public class CORSFilter  implements Filter {    @Override    public void init(FilterConfig filterConfig) throws ServletException {    }    @Overri...
完美解决axios跨域请求出错的问题
01-19
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9000’ is therefore not ...
Java跨域问题的处理详解
08-31
默认的情况下是不允许的。在前端 JS 中需要向 Servlet发出请求，请求代码如下所示： ```javascript $.ajax({ url: "your url", type: "get or post", dataType: "json", data: { .... }, success: function...
VUE axios发送跨域请求需要注意的问题
08-30
Vue Axios 跨域请求注意事项 在实际项目中，前端使用 Vue 框架，后端使用 PHP ...开发人员可以根据实际情况选择合适的解决方案，以解决跨域问题。同时，也希望读者在学习过程中能更好地理解跨域请求的概念和解决方法。
前端跨域+后端跨域.zip
02-15
在现代Web开发中，"跨域"是一个常见且重要的概念，尤其对于前端和后端的交互来说至关重要。本文将深入探讨“前端跨域”和“后端跨域”，以及它们在Vue.js和Java环境中的处理策略。 首先，我们来理解什么是“跨域”...
利用SpringMVC过滤器解决vue跨域请求的问题
11-29
之前写过通过注释的方法解决跨域请求的方法，需要每次都在controll类使用注解，这次通过springmvc的拦截器解决： 继承SpringMVC的类HandlerInterceptor重写preHandle方法，... response.setHeader("Access-Control-Allo
前后端分离发起axios请求，前端无法获取response header的内容 问题解决
qq_34267765的博客
04-13 6456
问题 描述：在springboot jwt结合vue axios 做一个验签的功能，后端验签通过 拦截器放行，但是前端无法拿到后端在header的状态码，从而前端响应拦截器无法生效。
前端取不到后台返回response里边header内容问题
Angus
07-29 6543
我是在前后端调试下载文件的时候遇到的问题。 我下载文件的方式是返回二进制流。这种方式的话实际上是不能有return的，也就是时候不能把一些内容带给前端。比方说文件名，我们就需要放header里边。但是默认情况下，前端拿不到你定义的header字段。 那么解决方式实际上是比较简单的，我的解决方案如下： response.reset(); response.setHeader("Access-Control-Allow-Origin", "*"); ...
前端如何获取响应头Content-Disposition中的filename
jojoyoyo88的博客
04-13 4881
后端在返回文件流时，将文件类型放在了响应头中，需要前端获取filename后手动添加文件名后缀。
前端js获取不到response header中自定义内容的解决方法
喵爬架
09-10 9767
原因：跨域后系统为了安全去掉自定义头 解决方法： 通过给header允许前端访问 解决跨域后系统为了安全去掉自定义头，后端在返回response时给header加上 Access-Control-Expose-Headers 如下： res.setHeader(“Access-Control-Expose-Headers”,“自定义头”); 下面展示一些 内联代码片。 // A code block var foo = 'bar'; //ajax 请求 $.ajax({ type: "post", u
前端获取不到后端返回自定义头信息，怎么解决获取不到跨域请求的response headers呢
北海一刀
07-03 2411
最近同事在对接后端接口时，后端让获取头里面的set-cookie的信息，怎么也获取不到，什么document.cookie呢，什么ajax，axios，甚至底层的xhr获取头getallresponseheader等方法都试遍了还是不能取到打印出来只有content-type。最后怎么解决呢 后端headers只需要加Access-Control-Expose-Headers并填上暴露出来的命名就行。 响应首部Access-Control-Expose-Headers用来配置哪些首部可以作为响应...
CORS——跨域请求那些事儿
weixin_33730836的博客
02-08 657
【本期嘉宾介绍】睿得，具有多年研发、运维、安全等IT相关从业经历。目前从事CDN、存储、视频直播点播的技术支持。喜爱钻研，喜爱编码，喜爱分享。 在日常的项目开发时会不可避免的需要进行跨域操作，而在实际进行跨域请求时，经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the ...
angular无法获取响应头HttpContext.Response.Headers / 公开标头
weixin_46484674的博客
09-16 4432
后端返回结果放进了响应头中（response header）；前端拿不到该响应头内容，前端打印出来的，一个都看不见（使用angular4 自带的拦截器）。`Access-Control-Expose-Headers`响应报头。在使用CORS方式跨域时，浏览器只会返回`默认的头部`Header。CORS规范将这些头称为`简单响应头`。要使用其他头可用于应用，请调用 WithExposedHeaders(String[])方法，设置公开。在使用CORS方式跨域时，浏览器只会返回`默认的头部`Header
前端解决跨域的问题代码
06-06
在前端解决跨域问题，可以通过以下方式： 1. 使用 JSONP（仅支持 GET 请求） ``` function jsonp(url, callback) { const script = document.createElement('script'); script.src = url + '?callback=' + callback; document.body.appendChild(script); } jsonp('http://example.com/data', 'callback'); ``` 2. 使用 CORS（需要服务器端设置） 前端代码： ``` fetch('http://example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 服务器端代码（Node.js + Express）： ``` const express = require('express'); const app = express(); app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); }); app.get('/data', function(req, res) { res.json({ message: 'Hello, world!' }); }); app.listen(3000, function() { console.log('Server is running on port 3000'); }); ``` 以上是两种常见的前端解决跨域问题的方式，但并不是所有情况都适用，需要根据具体情况进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值