文件下载跨域——TypeError: Cannot read properties of undefined (reading 'match')文件无法下载
问题:
在进行文件下载时,文件无法下载,控制台抛出异常
TypeError: Cannot read properties of undefined (reading 'match')
问题产生原因:
跨域问题
在进行文件导出的时候,前后端之间跨域,由于在文件下载的时候需要使用响应头content-disposition,而后台未进行此处理,前台只能访问CORS白名单中的响应头,访问不到content-disposition响应头,导致文件无法下载
CORS 白名单的响应标头**
**列入 CORS 白名单的响应标头(CORS-safelisted response header,也被称作“简单响应标头”)是 CORS 响应中可以安全地暴露给客户端脚本的 HTTP 标头。只有列入白名单的响应标头才会对网页可用。
默认情况下,白名单包括以下响应标头:
Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma
可以使用Access-Control-Expose-Headers标头将其他标头添加到白名单中。
解决方案:
服务端处理
详情见如下链接
nginx代理
配置nginx代理,可以避免此问题
设置响应头(我们采用的方式)
我们的项目是直连的,前后端之间没有nginx代理配置,考虑到 各种原因
(ψ(*`ー´)ψ),使用此方式
设置响应头,允许浏览器访问相应头的content-disposition属性
response.setHeader("access-control-expose-headers", "content-disposition");
response.setHeader("access-control-expose-headers", "*");
参考文献:
跨域问题: 什么是 CORS?一文搞懂 CORS 原理!什么是 CORS ?CORS 的原理是什么?为什么需要 CORS?在这篇文章 - 掘金
响应头: 响应标头Allow-Headers和Expose-Headers的区别和用法_access-control-allow-headers-CSDN博客
最后:
猜猜下面这个代码有什么问题,当时在这折磨了好久,前后台哪都没报错,但文件就是无法下载(解决方案见评论区)
httpResponse.setCharacterEncoding("UTF-8");
httpResponse.setHeader("access-control-expose-headers", "content-disposition");
httpResponse.setHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName, "UTF-8"));
httpResponse.setContentType("application/zip");