問題描述
在做一個圖片相關的項目時，需要用canvas對圖片進行在線繪製。圖片素材放在了CDN上，因而canvas的訪問帶來了跨域問題。爲了解決跨域問題，在CDN上配置了跨域訪問頭。如下所示：
Access-Control-Allow-Origin
Access-Control-Allow-Methods
然而配置好了跨域請求頭之後，瀏覽器仍然提示跨域訪問被拒絕。百般費解，爲什麼CDN已經配置了跨域訪問的情形下，仍然會失敗呢？
問題排查
採用Chrome調試模式發現，canvas的請求頭裏面沒有CORS相關的字段。懷疑是CDN故障。
聯繫CDN客服測試，結果客服測試發現沒有問題。經過雙方比較瀏覽器的環境發現，客服是在disable cache的環境下執行的。
於是確認該問題是由瀏覽器緩存導致的。
再次調試所有網絡請求發現，在canvas請求之前，還有一個<img>標籤加載了同樣的圖片，因爲<img>加載在前，因而等到canvas再次加載的時候，瀏覽器直接使用了緩存，但是該緩存的請求是不支持跨域的。
於是便出現了上文描述的問題。
解決辦法
在定位了問題以後，有兩個辦法。
一是將<img>標籤的請求改爲跨域請求方式。該思路需要修改img的請求方式，該方式博主並沒有驗證，僅提供思路。
二是禁止圖片緩存。在CDN圖片的HTTP頭中設置Cache-Control爲no-cache，如下圖爲阿里雲配置示意：
禁用緩存後，canvas即可以順利從CDN獲取圖片。