解決阿里雲OSS跨域問題
現象
本人項目中對阿里雲圖片請求進行了兩次，第一次通過img標簽進行，第二次通過異步加載獲取。第一次請求到圖片，瀏覽器會進行緩存，隨后再進行異步請求，保存跨域失效。
錯誤信息如下：
Failed to load http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8601' is therefore not allowed access.
解決
- 通過http請求狀態碼判斷第二次異步加載是使用的緩存，狀態碼是200(from cache) 。附：跟緩存有關的http狀態碼有：
- 200 OK (from cache) 是瀏覽器沒有跟服務器確認，直接用了瀏覽器緩存
- 304 Not Modified 是瀏覽器和服務器多確認了一次緩存有效性，再用的緩存
- 隨后多次嘗試清理緩存無效，后來發現原因是通過img標簽請求始終在異步請求前面，故嘗試在所有img標簽加載完成后清理緩存，則不會出現跨域問題。
- 發現問題出來img標簽上面，服務端做了對跨域的配置后，響應里面應該有Access-Control-Allow-Origin的配置，但是通過抓取請求發現沒有。
- 結論阿里雲oss的img標簽需要手動配置跨域。
<img crossOrigin="anonymous"/>
crossorigin屬性:
anonymous：如果使用這個值的話就會在請求中的header中的帶上Origin屬性，但請求不會帶上cookie和其他的一些認證信息。
use-credentials：這個就同時會在跨域請求中帶上cookie和其他的一些認證信息。
在使用這兩個值時都需要server端在response的header中帶上Access-Control-Allow-Credentials屬性。