解決阿里云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屬性。

轉載于:https://www.cnblogs.com/wwyz/p/9210856.html

總結

以上是生活随笔為你收集整理的解决阿里云OSS跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。