Rails在S3上爲Paperclip圖像設置代理？

Question

我有一個Rails 3應用程序，圖像託管在AWS S3上，由Paperclip gem管理。

我試圖設置它，以便用戶可以在瀏覽器中使用js庫編輯這些圖像（現在我正在使用Pixastic，但我願意嘗試Caman）但遇到問題由於來自瀏覽器的拒絕來自不同域的S3映像的CSRF保護，js圖像操作庫失敗。

是否有某種方式來代理圖像，使它們看起來是來自同一個域，或以其他方式解決此問題？

Answer 1

我剛和CamanJS一起工作了一整天。

不知道你是如何構建你的觀點（並且根本不知道Pixastic）我會盡我所能來回答。

假設你在你的HTML鏈接到原始圖像，添加crossorigin='anonymous'到圖像標籤：

<img class='image' crossorigin='anonymous' data-camanheight='450' src=<%= @photo.url%>>

這將設置瀏覽器的預期影像不是來自你的網站的網址。

我們發現這可以用於初始圖像，但是當CamanJS的revert（）函數重構圖像（在將其轉換回canvas元素之前）時，它會留下標題信息，讓瀏覽器知道它沒關係它是跨源數據。所以每次我們恢復一張圖片時，我們都會再次遇到CORS問題。我簡單地瀏覽了Pixastic的文檔，但不能告訴你是否會遇到類似的問題。

注意：超級流體體驗是我們的首要任務，我們不想設置代理，所以我們的解決方法是在JavaScript變量中保留圖像標記的克隆，並編寫我們自己的代碼方法來恢復畫布，重新克隆圖像標記，將其中一個克隆標記推入DOM，然後將其轉換爲新的畫布元素並擺脫舊元素。它遇到了一些CamanJS特定的行爲，使它變得有點'哈克'。

我對這個項目的合作伙伴提交了一份拉請求CamanJS保留的頭信息，所以這可能很快得到解決，使得CamanJS跨源資源共享一個更好的解決方案。

希望這會有所幫助。