js下载pdf文件遇到302且跨域

代码中通过原生的XMLHttpRequest发起了A请求,A请求302通过Location字段返回下载链接,在Chrome的开发者工具里,B请求被标红。

但是我看A请求是配置了跨域的

Aaccess-control-allow-credentials true
Aaccess-control-allow-headers
DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-client-device-country,x-client-device-language,x-assist-token,X-User-Token,x-language,X-Client-Device-Type,X-Client-Device-Identifier,x-insrc
Aaccess-control-allow-methods.  PUT, GET, POST, OPTIONS, DELETE
Aaccess-control-allow-origin *

这里其实有个伏笔,Aaccess-control-allow-credentials true 和 access-control-allow-origin * 是互斥的。

正常来讲前端是可以手动处理302的,因为上面的配置,response.status是0而不是302,response.headers.get('Location')也拿不到值

最好的结果就是通过window.open打开A链接,只能预览,却无法自动下载pdf

反转来了

不过解决问题的方法却不是我想的那样,虽说前端代码是一行没改。

A接口还是返回302,跨域配置没有变。

只是B请求也就是pdf的地址,Aaccess-control-allow-origin变成了null

在代码逻辑上通过XMLHttpRequest对象请求A接口,设置返回类型是blob,这个很有用。

然后直接通过window.URL.createObjectURL创建链接,参数只有返回,最后通过a标签下载。

代码里里标记返回的内容类型为application/pdf,这没啥用,这个属性正好是浏览器能预览的条件之一

重点

AJAX 请求 A 接口时遇到 302 重定向,最终拿到的 200 响应其实是重定向后的 B 链接返回结果,这是 XMLHttpRequest(AJAX)的默认重定向处理机制导致的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容