Access-Control-Expose-Headers 响应报头、跨域 公开响应头

已于 2022-12-07 09:39:08 修改
阅读量2.3w 收藏 21
点赞数 3
分类专栏： C#/.net 文章标签： 前端 java javascript
于 2022-09-28 15:01:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46484674/article/details/127089137
版权

问题现象： 前端无法获取响应头 Response Header 原因

问题原因：跨域问题 启用跨域请求（CORS）

前后端分离的项目，前端地址与后端地址不同,出现了跨域问题，因此 前端人员拿取不到后端返回的Response.headers.自定义的响应头 “X-Check-Submit-Repeat”(只能拿到默认的标头)

这里是引用

在使用CORS方式跨域时，浏览器只会返回 默认的头部 Header，认情况下可用的响应头包括：

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

CORS规范将这些头称为 简单响应头 。要使用其他头可用于应用，请调用 WithExposedHeaders(String[]) 方法，设置 公开 (后端代码可看下方链接)。
这样响应头就会显示 Access-Control-Expose-Headers ：…自定义头…
接着前端就能拿到里面的自定义响应头了。

Access-Control-Expose-Headers响应报头

简介

Access-Control-Expose-Headers 响应报头 指示哪些报头可以 公开 为通过列出他们的名字的响应的一部分
默认情况下，只显示6个简单的响应头，在上方也有介绍。
如果你想要客户端能够访问其他的请求头，则必须使用Access-Control-Expose-Headers 列出他们。

语法

Access-Control-Expose-Headers: , , …

参数说明
  • header-name
    暴露的头部列表，其中包含零个或多个头部名称，而不是资源可能使用并可能暴露的简单响应头（Response Header）

示例

  • 要公开一个非简单的自定义响应头，你可以指定（x开头是命名规范，下方有链接 有时间可以看看）
Access-Control-Expose-Headers: X-Check-Submit-Repeat
  • 要公开多个自定义标题，你可以用逗号分隔
Access-Control-Expose-Headers: X-Check-Submit-Repeat ，X-Order




推荐内容





WHAT - http headers 介绍（含 CORS 配置）
weixin_58540586的博客
04-25 667
http 四类 header 你知道有哪四类吗？以及我们熟知的请求头、响应头都有什么？另外想要配置 CORS 需要配置那些 header？
学习PHP(laravel框架)后端心得
Yin_ZOT的博客
06-16 390
在使用Laravel框架作为后端开发框架，Uniapp作为前端开发框架时，由于前后端不同的域名，会经常出现跨域请求的问题。为解决这个问题，我们可以使用Laravel中间件来定义一些处理跨域请求的方法。在后端，我们可以通过自定义路由来进行API的开发，同时可以使用模型来获取数据并返回响应数据给前端。在Laravel框架中，中间件是框架提供的一种衔接处理请求与响应的中间层，可以在请求到达控制器之前或之后，需要执行特定操作的地方进行处理。中间件可以用于身份验证、token验证、跨域请求等方面。在本问题中，我们使用
Access-Control-Expose-Headers
weixin_42353499的博客
09-19 2919
Access-Control-Expose-Headers
nginx：如何利用Nginx解决前端跨域问题？
最新发布
weixin_43290370的博客
04-23 847
作为资深Java工程师，深入理解Nginx在跨域解决方案中的应用，不仅能提升系统架构能力，更能体现全局视野。本文介绍的方案在阿里双11和字节跳动春晚红包等大流量场景中均得到验证，具有极高的工程实践价值。
Vue , axios 自定义请求头无法操作，解决:（Access-Control-Expose-Headers）
热门推荐
撒由那拉
11-21 1万+
错误背景：业务中注册登录的实现： TOKEN 验证，查了一些资料，主流的验证机制 : 用户在首次登录成功时从后端获取一个 token，然后在访问 登陆之后才有权限 访问的组件中，每次调用后端的 API 时，请求头中必须携带这个 token 作为验证。涉及知识点：前端：跨域配置vue axios 请求拦截器 this.$axios.interceptors.requestvue axios 响应拦截...
拦截器响应头中配置“Access-Control-Expose-Headers”实现跨域请求暴露token
hkl_Forever的博客
10-20 1万+
2】关键代码 response.setHeader("Access-Control-Expose-Headers", "token");和前端同事联调接口中，前端同事反映说在跨域请求的情况下无法获取token的值，后来找到解决办法。1】在登录拦截器处理类中的响应对象，把token对象暴露出来即可。
axios拦截自定义响应头，配置Access-Control-expose-Headers
有一棵树的博客
05-09 1280
发现了没，http请求的那么多头部，基本上都是服务器端设置的，比如跨域的Access-Control-Allow-Methods和Access-Control-Allow-Origin都是需要服务器配置，前端才能正常访问。我做的项目很少对请求的response headers进行操作，所以这次遇到了这个问题一时之间还不知道改咋整呢。配置一下Access-Control-expose-Headers。查了一下才知道，需要。
Java 文件下载名称为空问题解决 Access-Control-Expose-Headers
谈谈1974
09-06 2849
可以配置哪些响应头能够被外部客户端访问。所以想要让客户端可以访问到其他的响应头信息，服务端不仅要在 HTTP 响应里加入该响应头，还要通过额外的响应头。可以暴露给外部客户端访问，这 7 种响应头既可以在浏览器 Network 里看到，也可以在 JS 代码里获取。声明其可以被外部访问，最终生成可下载文件的 HTTP 响应的代码如下，这样前端就能够获取到。之所以会产生这种情况，是因为浏览器的安全功能限制。响应头，从浏览器的 Network 里也能看到。事实上，HTTP 协议的响应头。日常实现下载文件的需求，
java web服务器实现跨域访问
08-25
这就是一个跨域请求，请求http报头包含Origin: http://a.example，如果返回的http报头包含响应头Access-Control-Allow-Origin: http://a.example（或者Access-Control-Allow-Origin:http://a.example），表示域名B...
Laravel--CORS 扩展包完美解决前后端分离应用跨域请求
woqianduo的博客
11-16 1万+
概述 跨域请求的解决方案有 CORS 和 JSONP（了解更多明细可以参考这篇教程），但是 JSONP 有个致命缺点 —— 仅支持 GET 请求，所以推荐使用 CORS（Cross-origin resource sharing，跨域资源共享），何况在 Laravel 生态中已经有了 laravel-cors 这样强大的扩展包，拿来即用，只需要配置一个中间件即可上手，非常方便。 本片文章讲解两种跨...
boot spring 跨域注解_Spring boot 入门之CORS 跨域配置详解
weixin_33218578的博客
12-24 537
引言在Java 编程中,web项目还是经常遇到一些跨域的使用。这里主要记录几种spring框架,spring boot中的一些常见的几种配置跨域的方法。CORS(Cross-origin resource sharing-跨源资源共享)允许网页从其他域向浏览器请求额外的资源，例如 字体，CSS或来自CDN的静态图像。 CORS有助于将来自多个域的网页内容提供给通常具有相同安全策略的浏览器。 在这个...
aspnetcore-security-headers：将安全头添加到ASP.NET Core管道
02-04
ASP.NET核心安全标头 用法 安装AdamBarclay.AspNetCore.SecurityHeaders nuget软件包。 Install-Package AdamBarclay.AspNetCore.SecurityHeaders 要在应用程序配置期间在ASP.NET管道中包括安全头中间件，请执行以下操作： using AdamBarclay . AspNetCore . SecurityHeaders ; 并致电： app . UseSecurityHeaders () 默认值 调用app.UseSecurityHeaders()与调用： a
Node.js 获取 server的自定义headers字段 ＞ Access-Control-Expose-Headers
gu2022_3_5_21_23的博客
05-06 204
下载文件前端获取不到文件名称 Access-Control-Expose-Headers
zhang19age_的博客
01-04 1501
【代码】Access-Control-Expose-Headers坑坑坑。
让后端设置了Access-Control-Expose-Headers还是获取不到filename？
fhhvyhv的博客
02-02 3591
Content-Disposition的问题
无法获取Response Header内容的问题
qq_45279180的博客
06-13 1501
我们公司的接口服务器使用Nginx做了统一的代理处理，我们其实可以直接通过设置axios的baseURL来进行请求也就是直接使用接口服务器域名+接口地址拼接进行请求，但是这个新的项目默认使用的是前端代理，所以我就使用的前端代理。然后我就发现在联调某个接口的时候使用代理和不使用代理，这个接口的返回值居然是不一样的。来指定接口返回内容，如果指定了该字段则说明该接口返回的是二进制文件，此时对于接口的返回值不会进行处理而是直接返回整个。因为公司的接口返回的格式都是固定的，所以我们前端在请求的时候都会对。
response header
qq_30641461的博客
09-14 542
前端想获取响应头中的信息后端需这样写 response.setHeader("Access-Control-Expose-Headers","Content-Disposition-name"); // 自定义需要暴露的响应头参数 response.setHeader("Content-Disposition-name",URLEncoder.encode( fileName + ".pdf", "UTF-8"));// 自定义参数 对应的value值 response.setHea
.net core跨域请求下，允许前端读取Headers
一劍傾城
10-14 847
Response.Headers.Append("Access-Control-Expose-Headers", "FileInfo"); // 必须增加这个设置，否则客户端无法获取该header，因为不安全 Response.Headers.Append("FileInfo", System.Web.HttpUtility.UrlEncode(result.data.FileName...
解决nginx代理后，前端拿不到后端自定义的header
qq994877603的博客
04-02 1275
3.百度了一下，网上说后端设置属性add_header 'Access-Control-Expose-Headers' 'Authorization'2. 发布到服务器上，开启nginx代理，结果前端返回的接口拿不到自定义的Header,然后到network里面一看，明明有啊。，结果还是不行，为何？突然想到我是用nginx代理的，前端直接访问的nginx，是不是要在nginx中设置。4.果然，如果用nginx代理，需要在nginx中设置，如果不用nginx代理直接在后端响应中设置。
Access-Control-Expose-Headers 支持 Content-Disposition字段
12-12
`Access-Control-Expose-Headers` 是CORS（跨域资源共享）中的一个响应头，用于指定哪些响应头可以被客户端JavaScript代码访问。默认情况下，客户端只能访问一些基本的响应头，如 `Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified`, 和 `Pragma`。如果你需要让客户端能够访问其他响应头，就必须使用 `Access-Control-Expose-Headers` 来显式地指定。 `Content-Disposition` 是一个常用的响应头，用于指示内容的展示方式（如内联显示或作为附件下载）。默认情况下，`Content-Disposition` 并不在CORS的默认暴露头列表中，因此如果你需要让客户端能够访问 `Content-Disposition` 头，就必须将其添加到 `Access-Control-Expose-Headers` 中。 以下是一个示例代码，展示了如何在服务器端设置 `Access-Control-Expose-Headers` 以支持 `Content-Disposition` 字段： ```python from flask import Flask, make_response app = Flask(__name__) @app.route('/download') def download_file(): headers = { 'Content-Disposition': 'attachment; filename="example.txt"' } response = make_response("File content", 200) response.headers['Access-Control-Expose-Headers'] = 'Content-Disposition' response.headers['Content-Disposition'] = 'attachment; filename="example.txt"' return response if __name__ == '__main__': app.run(debug=True) ``` 在这个示例中，我们使用 Flask 框架创建了一个简单的服务器端应用。当客户端请求 `/download` 路由时，服务器会返回一个带有 `Content-Disposition` 头的响应，并将其添加到 `Access-Control-Expose-Headers` 中，以便客户端可以访问该头。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

元气小羊.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值