Response.AddHeader使用实例

本文概述了服务器端响应头的四个关键应用:设置文件下载默认名、页面刷新、页面转向和实现用户验证。理解如何通过Content-Disposition控制文件下载行为,以及如何使用Response Headers进行浏览器行为调整和权限管理。

(一)文件下载,指定默认名

Response.AddHeader("content-type","application/x-msdownload");

Response.AddHeader("Content-Disposition","attachment;filename = 要下载的文件名.后缀名");

(二)刷新页面

Response.AddHeader ("REFRESH", "60;URL=newpath/newpage.asp");

这等同于客户机端<META>元素:

<META HTTP-EQUIV="REFRESH", "60;URL=newpath/newpage.asp" />

(三)页面转向

Response.Status = "302 Object Moved";

Response.Addheader ("Location", "newpath/newpage.asp"); 

这等同于使用Response.Redirect方法:

Response.Redirect ("newpath/newpage.asp");

(四)强制浏览器显示一个用户名/口令对话框

Response.Status= "401 Unauthorized"; 

Response.Addheader ("WWW-Authenticate", "BASIC");

强制浏览器显示一个用户名/口令对话框,然后使用BASIC验证把它们发送回服务器。

(五)如何让网页不缓冲

Response.Expires = 0 ;

Response.ExpiresAbsolute = Now() - 1 ;

Response.Addheader ("pragma","no-cache");

Response.Addheader ("cache-control","private" );

Response.CacheControl = "no-cache";

注意:

      Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件。当 Internet Explorer 接收到头时,它会激活 文件下载对话框,它的文件名框自动填充了头中指定的文件名。(请注意,这是设计导致的;无法使用此功能将文档保存到用户的计算机上,而不向用户询问保存位置。) 

      服务端向客户端游览器发送文件时,如果是浏览器支持的文件类型,一般会默认使用浏览器打开,比如txt、jpg等,会直接在浏览器中显示,如果需要提示用户保存,就要利用Content-Disposition进行一下处理,关键在于一定要加上attachment:

Response.AppendHeader("Content-Disposition","attachment;filename=FileName.txt");

备注:这样浏览器会提示保存还是打开,即使选择打开,也会使用相关联的程序比如记事本打开,而不是IE直接打开了。

Content-Disposition就是当用户想把请求所得的内容存为一个文件的时候提供一个默认的文件名。具体的定义如下:

content-disposition = “Content-Disposition” “:”

disposition-type *( “;” disposition-parm )

disposition-type = “attachment” | disp-extension-token

disposition-parm = filename-parm | disp-extension-parm

filename-parm = “filename” “=” quoted-string

disp-extension-token = token

disp-extension-parm = token “=” ( token | quoted-string )

那么由上可知具体的例子:

Content-Disposition: attachment; filename=“filename.xls”

       当然filename参数可以包含路径信息,但User-Agnet会忽略掉这些信息,只会把路径信息的最后一部分做为文件名。当你在响应类型为application/octet- stream情况下使用了这个头信息的话,那就意味着你不想直接显示内容,而是弹出一个”文件下载”的对话框,接下来就是由你来决定“打开”还是“保存” 了。

注意事项:

1.当代码里面使用Content-Disposition来确保浏览器弹出下载对话框的时候。 response.addHeader("Content-Disposition","attachment");一定要确保没有做过关于禁止浏览器缓存的操作。如下:

response.setHeader("Pragma", "No-cache"); 

response.setHeader("Cache-Control", "No-cache"); 

response.setDateHeader("Expires", 0);

不然会发现下载功能在operafirefox里面好好的没问题,在IE下面就是不行,就是找不到文件。

### 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、付费专栏及课程。

余额充值