作者：薛?定?諤?的?貓?
來(lái)源：https://www.yuque.com/zhanghaofei/blog/vqc5G6
業(yè)務(wù)背景
由于頁(yè)面設(shè)計(jì)需要，頁(yè)面展示圖片，并可點(diǎn)擊下載按鈕進(jìn)行下載（需要前端打包多個(gè)圖片，所以需要使用ajax請(qǐng)求圖片獲得二進(jìn)制內(nèi)容，不能直接使用img或a進(jìn)行下載），如圖：
問(wèn)題現(xiàn)象
圖片存儲(chǔ)再阿里云OSS，阿里云OSS的CORS設(shè)置的跨域并沒(méi)有問(wèn)題：
打開(kāi)頁(yè)面圖片能正常顯示，但是下載（ajax請(qǐng)求圖片）會(huì)因?yàn)榭缬驁?bào)錯(cuò)：
Access to XMLHttpRequest at '' from origin 'http://192.168.13.133:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 同頁(yè)面其他外站圖片鏈接就可以正常使用，只有自己OSS的圖片有問(wèn)題
- 多次嘗試發(fā)現(xiàn)network控制臺(tái)禁用緩存情況下是沒(méi)有問(wèn)題的
- 禁用緩存下載圖片后，再啟用緩存，此時(shí)下載又沒(méi)有問(wèn)題了
- 即使強(qiáng)制刷新也仍然下載不了，network顯示讀取自本地緩存
基本可以猜測(cè)是緩存或者使用CDN的問(wèn)題。而此時(shí)阿里工單也回復(fù)了：
描述情況基本一樣
原因分析
什么是跨域及CORS配置此處不再詳述
- 圖片存儲(chǔ)使用的阿里云OSS，提供默認(rèn)的域名可以訪問(wèn)圖片，只需要OSS設(shè)置跨域配置即可
- 使用了CDN，而CDN也同樣需要跨域配置（沒(méi)有配置）
- 頁(yè)面直接img顯示的圖片，而img并不會(huì)觸發(fā)跨域，所以當(dāng)頁(yè)面打開(kāi)后img會(huì)請(qǐng)求到CDN的圖片并緩存到本地，而緩存不帶CORS配置，然后ajax請(qǐng)求直接訪問(wèn)本地圖片，觸發(fā)了同源限制，導(dǎo)致跨域報(bào)錯(cuò)
解決方法
- 直接使用默認(rèn)的非CDN地址下載，url = url.replace('file.xxx.com', 'xxx.oss-cn-beijing.aliyuncs.com')替換域名等方式
- 防止使用緩存，ajax請(qǐng)求圖片是加上隨機(jī)參數(shù)，url = url + '?s=' + Math.random().toString()
- 配置CDN的CORS，使其直接返回跨域配置
