作者：薛?定?諤?的?貓?
來源：https://www.yuque.com/zhanghaofei/blog/vqc5G6
業務背景
由于頁面設計需要，頁面展示圖片，并可點擊下載按鈕進行下載（需要前端打包多個圖片，所以需要使用ajax請求圖片獲得二進制內容，不能直接使用img或a進行下載），如圖：
問題現象
圖片存儲再阿里云OSS，阿里云OSS的CORS設置的跨域并沒有問題：
打開頁面圖片能正常顯示，但是下載（ajax請求圖片）會因為跨域報錯：
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.
- 同頁面其他外站圖片鏈接就可以正常使用，只有自己OSS的圖片有問題
- 多次嘗試發現network控制臺禁用緩存情況下是沒有問題的
- 禁用緩存下載圖片后，再啟用緩存，此時下載又沒有問題了
- 即使強制刷新也仍然下載不了，network顯示讀取自本地緩存
基本可以猜測是緩存或者使用CDN的問題。而此時阿里工單也回復了：
描述情況基本一樣
原因分析
什么是跨域及CORS配置此處不再詳述
- 圖片存儲使用的阿里云OSS，提供默認的域名可以訪問圖片，只需要OSS設置跨域配置即可
- 使用了CDN，而CDN也同樣需要跨域配置（沒有配置）
- 頁面直接img顯示的圖片，而img并不會觸發跨域，所以當頁面打開后img會請求到CDN的圖片并緩存到本地，而緩存不帶CORS配置，然后ajax請求直接訪問本地圖片，觸發了同源限制，導致跨域報錯
解決方法
- 直接使用默認的非CDN地址下載，url = url.replace('file.xxx.com', 'xxx.oss-cn-beijing.aliyuncs.com')替換域名等方式
- 防止使用緩存，ajax請求圖片是加上隨機參數，url = url + '?s=' + Math.random().toString()
- 配置CDN的CORS，使其直接返回跨域配置
