Content-Type引发的服务端收不到HTTP请求参数的问题

本文详细阐述了原创文章在网络上的转载规范,强调了尊重作者版权的重要性,并提供了正确的转载方式,包括如何声明出处,确保原创作者的权益得到保护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 版权声明:本文为博主原创文章,转载请声明出处。    https://blog.youkuaiyun.com/zuoyixiao/article/details/78717585

--------------------- 
作者:萧萧慕宇 
来源:优快云 
原文:https://blog.youkuaiyun.com/zuoyixiao/article/details/78717585 
版权声明:本文为博主原创文章,转载请附上博文链接!

### 如何正确获取 HTTP 响应头中的 `Content-Type` 字段 当尝试通过 JavaScript 或其他前端框架访问 HTTP 响应头时,可能会遇到某些字段无法被读取的情况。这是因为跨域资源共享(CORS)策略限制了哪些响应头可以暴露给客户端[^4]。 #### 跨域资源共享 (CORS) 对响应头的影响 默认情况下,只有以下标准头部会被浏览器自动暴露给前端脚本: - Cache-Control - Content-Language - Content-Type - Expires - Last-Modified - Pragma 如果自定义的响应头(如 `Content-Disposition`)未显式声明为可公开,则它们不会被浏览器提供给前端代码[^3]。对于这种情况,服务器端需要设置 CORS 头部 `Access-Control-Expose-Headers` 来指定额外允许暴露的响应头名称列表。 #### 正确配置服务器端以支持获取特定响应头 为了使前端能够成功读取 `Content-Type` 或者其他的非默认响应头,比如 `Content-Disposition`,服务端应当调整其 CORS 配置如下: ```java // Java Servlet 示例 设置 Access-Control-Expose-Headers response.setHeader("Access-Control-Expose-Headers", "Content-Type, Content-Disposition"); ``` 上述代码片段展示了如何向响应添加 `Access-Control-Expose-Headers` ,其中包含了两个具体的头部名字:`Content-Type` 和 `Content-Disposition` 。这一步骤确保这些头部能被跨源请求所识别并利用。 #### 使用 Angular 拦截器处理响应头 即使已经设置了正确的 CORS 参数,在像 Angular 这样的现代前端框架中使用拦截器捕获完整的响应信息也需要特别注意方法的选择。例如,Angular 的 HttpClient 默认只返回 body 数据部分而不包括所有的元数据除非明确指定了观察选项 'observe' 为 'response': ```typescript this.http.get('/api/endpoint', { observe: 'response' }).subscribe(resp => { console.log(resp.headers.get('Content-Type')); // 获取 Content-Type }); ``` 此 TypeScript 片段演示了一个 GET 请求的例子,它不仅接收到了 API endpoint 返回的主要 payload (主体),还连同整个 HttpResponse 结构一起接收到,从而使得我们可以安全地调用 `.headers.get()` 方法来提取任意已知存在的响应头项。 ### 总结 要解决无法获得 `response.headers['content-type']` 的问题,需确认两点:一是服务器是否正当地设定了 `Content-Type` 并将其列入到 `Access-Control-Expose-Headers` 中;二是前端应用是否采用了恰当的方式去解析完整的 HTTP Response 对象而非仅仅关注于 Body 内容本身。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值