在NextJS上暴露Content-Disposition头部

Question

我正在使用axios从外部API获取响应中的Content-Disposition头。

尽管Chrome DevTools网络响应中存在该标头，但似乎无法从服务器获得该特定标头的访问权限。

我发现了这篇文章，讲述了如何通过Access-Control-Expose-Headers公开Content-Disposition标头，但我不太确定如何在Nextjs中实现它。

我按照此Nextjs文档页面有关安全标头的说明编辑了next.config.js文件，但没有成功。

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  async headers() {
    // to allow specific headers to appear in requests
    // https://nextjs.org/docs/advanced-features/security-headers
    const securityHeaders = [
      // important
      { key: "Access-Control-Expose-Headers", value: "Content-Disposition" },
    ]
    return [
      {
        source: '/:path*', // req path
        headers: securityHeaders
      }
    ]
  }
}

以下是我使用axios进行的API调用:

// lib/utils.js

export async function downloadFile(collectionName: string, documentId: string) {
  const res = await axios.get(
    `https://api.myapiendpoint.com/file/${collectionName}/${documentId}`
  );
  console.log(res.headers);
}

Chrome DevTools 日志:

console.log 输出:

// these are the only headers I receive
{
    "content-length": "195687",
    "content-type": "text/csv; charset=utf-8",
    "last-modified": "Thu, 10 Feb 2022 16:00:05 GMT"
}

- f-starace

---

“我似乎无法从服务器访问到那个特定的头文件” - 你是如何从服务器访问它的？ - juliomalves

嗨@juliomalves。我刚刚更新了我的问题，介绍了我使用axios尝试做的事情以及从服务器收到的响应。我对这个主题不是很熟悉，如果还有其他需要帮助的地方，请告诉我 :) - f-starace

Answer 1

我99.99%肯定这很可能是后端问题。我之前也遇到过同样的问题，需要实现下载 PDF/CSV（带文件名）逻辑，必须从响应中访问 content-disposition 头部。尽管我尝试了很多方法，但在我的控制台中始终看不到该头部，但在开发工具和 Postman 中可以看到。经过很多努力并说服我的后端团队成员，结果发现后端没有公开它。检查您的后端（无论使用什么技术），问题就在那里 ;)

- Harry