Response.AddHeader使用实例

本文详细介绍了HTTP响应头在不同场景的应用实例,包括文件下载、页面刷新、页面转向、强制用户名/口令对话框显示及网页不缓冲的实现方法。
 Response.AddHeader使用实例

1.文件下载,指定默认名
Response.AddHeader("content-type","application/x-msdownload"); // 限制类型
Response.AddHeader("Content-Disposition","attachment;filename=文件名.rar");// 下载后的文件名

2.刷新页面
Response.AddHeader (“REFRESH”, ”60;URL=newpath/newpage.asp”)
这等同于客户机端<META>元素:
<META HTTP-EQUIV=”REFRESH”, “60;URL=newpath/newpage.asp”>

3.页面转向
Response.Status = “302 Object Moved”
Response.Addheader “Location”, “newpath/newpage.asp”
这等同于使用Response.Redirect方法:
Response.Redirect “newpath/newpage.asp”

4.强制浏览器显示一个用户名/口令对话框
Response.Status= “401 Unauthorized”
Response.Addheader “WWW-Authenticate”, “BASIC”
强制浏览器显示一个用户名/口令对话框,然后使用BASIC验证把它们发送回服务器(将在本书后续部分看到验证方法)。

5.如何让网页不缓冲
Response.Expires = 0
Response.ExpiresAbsolute = Now() - 1
Response.Addheader "pragma","no-cache"
Response.Addheader "cache-control","private"
Response.CacheControl = "no-cache
### 3.1 接收文件流并处理下载逻辑 在 Vue3 应用中,从前端接收后端返回的文件流通常使用 `axios` 或 `fetch` 实现。为确保文件正确下载,需将响应类型设置为 `blob`,并在获取响应后创建临时链接触发下载操作。例如: ```javascript import axios from 'axios'; const downloadFile = async () => { try { const response = await axios.get('/api/download', { responseType: 'blob', // 设置响应类型为 blob 以接收文件流 }); const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.ext'); document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url); } catch (error) { console.error('文件下载失败:', error); } }; ``` 上述代码中,通过设置 `responseType: 'blob'` 确保接收到的是二进制文件流,并使用 `URL.createObjectURL` 创建临时下载链接。下载完成后,通过 `revokeObjectURL` 释放内存资源 [^1]。 ### 3.2 校验文件完整性(MD5) 在下载文件后,若需验证文件完整性,可使用后端返回的 MD5 值进行比对。由于浏览器端无法直接对 `Blob` 数据进行 MD5 计算,需借助 `FileReader` 将文件读取为 `ArrayBuffer` 并使用 `crypto-js` 或 `spark-md5` 等库进行哈希计算: ```javascript import SparkMD5 from 'spark-md5'; const verifyFileMD5 = async (fileBlob, expectedMD5) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = async () => { const arrayBuffer = reader.result; const hash = SparkMD5.ArrayBuffer.hash(arrayBuffer); resolve(hash === expectedMD5); }; reader.onerror = () => reject(new Error('文件读取失败')); reader.readAsArrayBuffer(fileBlob); }); }; ``` 在下载文件后调用 `verifyFileMD5` 方法,传入文件 `Blob` 和预期的 MD5 值,即可验证文件是否完整或在传输过程中是否被篡改 [^2]。 ### 3.3 读取响应头信息 后端在返回文件流时,通常会在响应头中携带额外信息,如文件名、大小、MD5 值等。在 `axios` 请求中,可通过 `response.headers` 获取响应头内容: ```javascript const downloadFileWithHeaders = async () => { try { const response = await axios.get('/api/download', { responseType: 'blob', }); const contentDisposition = response.headers['content-disposition']; const md5Hash = response.headers['x-file-md5']; const fileNameMatch = contentDisposition?.match(/filename="?([^"]+)"?/); const fileName = fileNameMatch ? fileNameMatch[1] : 'downloaded-file'; const fileBlob = new Blob([response.data]); const isValid = await verifyFileMD5(fileBlob, md5Hash); if (isValid) { const url = window.URL.createObjectURL(fileBlob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url); } else { console.error('文件校验失败,MD5 不匹配'); } } catch (error) { console.error('下载或校验过程中发生错误:', error); } }; ``` 上述代码中,通过读取 `content-disposition` 获取文件名,通过 `x-file-md5` 获取文件的 MD5 值,并在下载后进行校验,以确保文件未被篡改 [^2]。 ### 3.4 异常处理与调试建议 前端在处理文件下载时,应始终使用 `try/catch` 捕获异常,确保错误不会导致页面崩溃。同时,可通过 `window.onerror` 或 `window.onunhandledrejection` 监听全局错误,便于调试和日志记录: ```javascript window.onunhandledrejection = (event) => { console.error('未处理的 Promise 拒绝:', event.reason); event.preventDefault(); }; ``` 此外,在 Vue3 中,若需在组件中调用下载方法,应确保 `this` 正确指向组件实例,或使用 Composition API 的 `setup()` 函数结合 `ref` 和 `onMounted` 等生命周期钩子进行逻辑管理 [^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值