Firefox on iOS无法打开通过Fetch获取的Blob文件的问题求助
Firefox on iOS无法打开通过Fetch获取的Blob文件的问题求助
大家好,我最近碰到了一个百思不得其解的问题,想请教下各位同行有没有遇到过类似情况,或者知道问题出在哪。
我在React项目里写了一个函数,用户点击按钮后就会从后端API获取Blob格式的文件(支持PDF和几种常见图片格式),然后在新标签页打开。这个功能在绝大多数主流浏览器的移动端都正常工作:Chrome(安卓、iOS)、Safari(iOS)、Edge(安卓、iOS)、Firefox(安卓)都能顺利打开新标签页展示文件,哪怕有些浏览器需要手动去设置里允许弹窗/解除阻止,操作后也能正常运行。
但唯独**Firefox(iOS)**完全没反应:我已经在浏览器设置里解除了弹窗阻止,用Mac连接手机调试后发现,Blob文件确实能正常从后端获取到,没有任何报错,但执行window.open(objUrl)这行代码时,浏览器就是直接忽略,新标签页根本不会打开。更奇怪的是,其他网站在这个Firefox(iOS)上打开新标签页是完全正常的,就我的项目不行,这情况和之前Safari(iOS)没解除弹窗阻止时的表现很像,但Firefox这边解除阻止后还是没用。
下面是我的相关代码和配置,麻烦各位帮忙看看:
React前端获取并打开Blob的函数
function viewDocument(userId, documentId, accessToken) { const url = new URL("https://my-api/my-controller/Document"); url.searchParams.set("UserId", userId); url.searchParams.set("DocumentId", documentId); fetch(url.toString(), { method: 'get', mode: 'cors', credentials: 'include', headers: { authorization: "Bearer " + accessToken }, body: null }) .then((response) => { if (!response.ok) { throw response } response.blob().then((blob) => { const objUrl = window.URL.createObjectURL(new Blob([blob], {type: blob.type})); window.open(objUrl); }); }) .catch( error => { // handle error }); };
内容安全策略(CSP)配置
default-src 'self'; frame-src 'self' blob:; img-src 'self' blob:; object-src 'self' blob:;
.NET Core后端返回文件的API代码
[HttpGet("api/[controller]/Document")] [Authorize] public async Task<IActionResult> GetDocument(string userId, long documentId) { var fileExtensions = new Dictionary<string, string>() { {".gif", "image/gif"}, {".jpg", "image/jpg"}, {".jpeg", "image/jpeg"}, {".pdf", "application/pdf"}, {".png", "image/png"}, {".tif", "image/tif"}, {".tiff", "image/tiff"} }; var filePath = "some-file-path"; var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read); var contentType = fileExtensions[Path.GetExtension(filePath).ToLower()]; return File(fileStream, contentType); }
有没有朋友遇到过Firefox(iOS)的这个问题?或者能从我的代码/配置里看出什么问题吗?非常感谢大家的帮助!
内容来源于stack exchange
相关产品推荐
相关产品推荐

