代码中通过原生的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)的默认重定向处理机制导致的