Vue a标签如何携带请求头？
思否 问答 👍 2 含 AI 优化版
问题
Vue a标签如何携带请求头？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
在 Vue 项目中，希望用 <a> 标签直接下载一个需要携带自定义请求头（如 Authorization token）才能访问的资源，但 <a> 标签本身无法设置请求头。
涉及技术
HTML <a> 标签、AJAX/fetch、Blob 下载
期望结果
找到一种能携带自定义请求头并触发文件下载的方式。
回答
原始回答
没办法。 如果后端非要 header 带 token，那么你就使用 ajax 去接收，然后类型改成 blob，然后去下载这个资源。
AI 优化 · 回答整理
解答思路
<a href="..."> 发起的是浏览器原生请求，无法附加自定义请求头。如果后端要求必须通过请求头传递 token，就不能直接用 <a> 标签下载，而要先用 AJAX/fetch 携带请求头去请求资源，拿到二进制数据（Blob）后再触发下载。
示例代码
async function downloadWithAuth(url, token, filename) {
const res = await fetch(url, {
headers: {
Authorization: `Bearer ${token}`,
},
});
const blob = await res.blob();
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
}
详细说明
- 第一步：用
fetch（或axios）发起请求，在headers里带上需要的Authorization/token。 - 第二步：把响应体以
blob类型接收，得到文件的二进制数据。 - 第三步：用
URL.createObjectURL(blob)生成一个临时的本地 URL，赋给动态创建的<a>标签的href，并设置download属性，再调用click()触发浏览器下载。 - 下载完成后建议调用
URL.revokeObjectURL释放内存。
小结
原生 <a> 标签无法携带请求头，涉及鉴权的下载场景需要先用 AJAX 请求资源并转为 Blob，再用临时 <a> 标签触发下载。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault