如何在Image（）構造函數中發送餅乾

我正在將一張圖像注入一個畫布，我必須通過將cookie傳遞給我的請求來安全地獲取圖像。我的問題是，當src被設置時，Image構造函數似乎沒有發送包含請求的cookie。 cookies不能通過js訪問，它們由瀏覽器發送。如何在Image（）構造函數中發送餅乾

var img = new Image(); 
img.setAttribute('crossOrigin', 'anonymous'); 

validateUrl(originalUrl, function (validatedUrl) { 
    img.src = validatedUrl; //GET fails after this happens 
}); 

img.onload = function() { 
    drawImageProp(context, img); 
}

來源

2015-10-30 Tantelope

如果設置了crossorigin屬性的圖像，那麼Cookie不會隨該圖像的請求而發送的。這就是該功能如何寫入工作。

Cookie被綁定到特定的域/子域（並且可選地連接到該域內的路徑）。在請求圖片時，圖片請求的域名的任何cookie都將自動與圖片請求一起發送。

瀏覽器只允許Javascript訪問與主機網頁位於同一起源的Cookie。所以，Javascript無法讀取其他域的cookie。

因此，當您通過設置.src屬性請求圖片時，任何屬於圖片網址域的cookie都會自動與圖片請求一起發送（您不需要做任何事情）。

來源

2015-10-30 22:44:51 jfriend00

當我把網址放入標籤時，它顯示正常 - 在這種情況下，檢查網絡調用我可以看到cookie隨請求發送。在這種情況下，服務器給我一個錯誤，因爲它沒有得到cookie，我試圖弄清楚他們爲什麼不去。在這種情況下，請求甚至不會跨域。 – Tantelope

@TanyaMounitsyna - 我在jsFiddle中運行自己的測試，並在手動創建圖像時發送cookie。所以，我不知道如何重現您的問題。在我的測試中，我必須在URL的末尾添加一個隨機查詢參數，以便擊敗圖像緩存以便測試。你確定你沒有緩存問題嗎？ – jfriend00

@TanyaMounitsyna - 如果您在圖片上設置了「crossorigin」屬性，則cookie不會與請求一起發送。這就是該功能如何寫入工作。請參閱此處的「匿名」說明：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin – jfriend00

如何在Image（）構造函數中發送餅乾

回答

相關問題