獲取已加載

Question

我有一個上的負載或錯誤事件等待img標籤的功能IMG錯誤事件。有時，我得到一個錯誤事件，並且img標籤的naturalWidth和naturalHeight都等於零。奇怪的是，在chrome的開發人員工具中查看網絡選項卡，圖像請求的狀態代碼是302，並且重定向的請求以200狀態正常返回。 （實際的圖像存儲在S3上，但我們的服務器在那裏重定向）。

另外的問題實際上顯示，但無法正常，因爲我使用naturalWidth和naturalHeight來計算圖像的一些CSS屬性。

我也得到了一個錯誤說「跨源圖像負荷由跨來源資源共享策略拒絕。」我不確定這是相關的，還是甚至指的是相同的圖像。

我特別困惑，因爲它永遠只能在一系列發生在第一個圖像，有時只發生。

有誰知道是怎麼回事，或者至少如何找出是什麼原因造成的錯誤事件？

UPDATE：

的S3桶和服務器重定向都被配置爲支持CORS。但是，似乎每當發生這種情況時，瀏覽器正在使用沒有Access-Control-Allow-Origin標頭的緩存圖像。我相信發生的事情是，在應用程序的較早版本中，我們請求的圖像不使用CORS，因此沒有標題，那麼此時我們使用CORS，但是我們點擊了未通過CORS檢索的緩存版本。我仍然不知道如何解決這個問題。我不能100％確定那是發生了什麼事，雖然我很確定它與緩存和跨源請求有關。

我也仍然搞不清楚爲什麼我收到兩個錯誤和負載事件爲同一img標籤，和圖像實際顯示。此外，即使調用加載事件處理函數，this.complete也是false，this.naturalWidth和this.naturalHeight爲零。

Answer 1

CORS是一種允許網站向另一個獨立域發出請求的技術。在你的情況下，這是從你的網絡服務器到亞馬遜S3服務器。您需要允許來自您的域的請求連接到您的S3資源。

我相信你會找到你所需要的信息：http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

希望它能幫助！

Answer 2

從HTTP響應代碼W3C規範：

---

10.3.3 302實測值

請求的資源下不同的URI臨時駐留。由於重定向有時可能會發生變化，因此客戶端應該繼續使用Request-URI來處理將來的請求。如果由Cache-Control或Expires標頭字段指示，此響應僅可緩存。

臨時URI應該由響應中的位置字段給出。除非請求方法是HEAD，否則響應的實體應該包含一個超鏈接到新URI的短超文本註釋。現在

---

，這意味着302重定向，但該瀏覽器可以緩存新的網址，而不是在內部翻譯你的以下要求這一點。超時後，瀏覽器將重試原始URL而不會內部重定向請求。所以錯誤出現在或多或少的隨機間隔。

的跨域策略是什麼，是在更安全的瀏覽器（Chrome的現代化和其他許多人）和更安全的Javascript配置文件（如ES5）來實現。

即使您只是想加載圖像，本政策也會考慮到跨域請求的危險。這裏有這樣的例子很多：exploit cross-domain image loading