跨域获取 Headers 中的 Content-Disposition

最新推荐文章于 2024-03-13 09:38:36 发布

MAIMIHO

最新推荐文章于 2024-03-13 09:38:36 发布

阅读量1.3k

点赞数

分类专栏： Web 文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/MAIMIHO/article/details/134192100

版权

Web 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在浏览器的跨域请求限制下，通过在服务器端配置Access-Control-Expose-Headers头并结合Express框架，允许获取Content-Disposition头信息，同时展示了如何在客户端如Axios中处理这种跨域请求。

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

在默认情况下，浏览器限制了对跨域请求响应的访问权限，阻止了读取敏感的响应头信息（例如 Content-Disposition）。这是由于跨域请求的安全策略所决定的。

如果你想在跨域请求中获取到 Content-Disposition 头信息，需要在服务器端进行一些配置。

首先，确保服务器返回的响应中包含 Access-Control-Expose-Headers 头，并将 Content-Disposition 添加到其中。这样浏览器才会在跨域请求成功后暴露该头信息。

在服务器端配置响应头，示例代码（使用 Express 框架）：

app.use(function(req, res, next) {
  res.header('Access-Control-Expose-Headers', 'Content-Disposition');
  next();
});

以上代码将在每个响应头中添加 Access-Control-Expose-Headers: Content-Disposition，使浏览器能够获取到 Content-Disposition 头信息。

在客户端使用 Axios 发起跨域请求时，确保你在 response 对象中可以从 headers 属性中获取到 Content-Disposition 头信息。

axios.get('http://example.com/api', { crossDomain: true })
  .then(response => {
    const contentDisposition = response.headers['content-disposition'];
    // 在这里可以访问到 Content-Disposition 头信息
  })
  .catch(error => {
    // 处理错误
  });