加載圖像並在需要驗證時移除

我從搜索機器中抓取一些（隨機）圖像並將它們顯示給用戶。問題是：可能發生某些圖像需要http認證（用戶名/密碼）。我不想擁有這些圖像......應該將它們刪除，而不顯示彈出窗口，您可以輸入用戶名和密碼。加載圖像並在需要驗證時移除

其實我正在使用簡單的jquery方法來顯示我的圖像。

var displayNode = .... 
.... 
var m_img = $("<img />", {src : "...."}); 
m_img.bind('error', function (e) { 
    $(this).remove(); 
}); 
displayNode.append(m_img);

現在我直接加載圖像，如果發生錯誤，它將被刪除。但是，當服務器發回HTTP（基本）身份驗證標誌時，這當然不是錯誤。因此有一個輸入提示。當我點擊「取消」propmt關閉，jquery將其視爲錯誤並刪除圖像。

那麼..什麼是檢查是否有認證，如果不顯示給用戶的最好方法是什麼？

來源

2014-09-19 Ioannis K.

你可以做一個HEAD請求，僅返回頭，後來竟提出請求之前檢查認證頭標題：

的HEAD方法相同，除了服務器不能返回到GET消息體在響應中。 HTTP頭中包含的對HEAD請求作出響應的元信息應該與爲響應GET請求而發送的信息相同。此方法可用於獲取有關請求隱含的實體的元信息，而無需傳遞實體主體本身。

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

你可以使用這個方法首先檢查頭部，然後如果OK，獲取圖像。你必須用受保護的資源來測試它，我不確定瀏覽器在請求HEAD時會做什麼，而且我沒有本地受保護的資源來測試（CORS讓我瞭解我的在線資源試圖反對）。小提琴：

var basicAuthProtectedURL = 'http://fiddle.jshell.net'; 
var xhr = new XMLHttpRequest(); 
xhr.open("HEAD", basicAuthProtectedURL, true); 
xhr.onload = function (e) { 
    if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
     console.log(xhr.getAllResponseHeaders()); //all headers 
     console.log(xhr.getResponseHeader('Content-Type')); //just the one you want 
     if (xhr.getResponseHeader('WWW-Authenticate')) { 
      console.log('I got the authentication header, skip this request.'); 
     } else { 
      console.log('no header, resource unsecure'); 
     } 
    } else { 
     console.error(xhr.statusText); 
    } 
    } 
}; 
xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
}; 
xhr.send(null);

http://jsfiddle.net/5z5bnwgz/

回來後如何去！

來源

2014-09-19 20:07:49 pherris

我試過使用HEAD，但也有一些問題。首先是跨域的問題（jQuery的跨域標誌）。第二：如果服務器返回401響應，onload事件根本不會被觸發。解決方案可能如下所示：如果觸發了錯誤 - >刪除圖像。如果onload被觸發並且readystate是4 - >圖像可用並且可以加載。 – 2014-09-19 21:51:02

這對我來說似乎完全合理......只要它不觸發用戶名/密碼提示。 – pherris 2014-09-20 01:58:23

加載圖像並在需要驗證時移除

回答

相關問題