如何使用帶有JQuery的小書簽發送403身份驗證標頭作為跨域請求（CORS）？

Question

因此，我有一個可以在其他網站上執行javascript的小書簽，一旦單擊了“ 緩存”按鈕，我就想觸發“ 403 Authentication Required標頭。 這樣，將出現提示要求他們登錄。

問題是我無意向我正在發出的ajax請求提供身份驗證標頭，同時將Access-Control-Allow-Origin:設置為帶有*值的任何域。 我應該明確定義要允許403 Authentication標頭顯示在哪個域上，但是我不能。

這是我的代碼。

的.htaccess

header set Access-Control-Allow-Origin: *
#header set Access-Control-Allow-Methods: GET, POST, PUT, DELETE
header set Access-Control-Allow-Headers: Authorization

JQuery的

$.ajax({
            headers : {
                "Authorization" : "Basic TVNF3TQtU1BGMjAx6C12bVxzbW4ydHBvaW50OlF3Z5J0eSEyM6Q1"
            },
            type: "GET",
            url: 'http://desbest.uk.to/clickrobot/favicon.png', //image for testing
            crossDomain:true,
            xhrFields: {
                withCredentials: true
            }, 
            //contentType: "application/json; charset=utf-8",
            //dataType: "json",
            success: function(data) {
                alert('ok!');
                //formatData(format_type,data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ' / ' + errorThrown);
            }
        }); 

我得到的錯誤

當憑據標志為true時，不能在Access-Control-Allow-Origin中使用通配符。

我已經看到Diigo小書簽可以做到這一點，所以有可能，但是如何？ 有可能嗎？

Answer 1

讓我們看一下文檔 。 有兩件事要注意：

...瀏覽器將拒絕任何不具有Access-Control-Allow-Credentials的響應：true標頭...

和

重要說明：響應憑據請求時，服務器必須指定域，並且不能使用通配符。

您應該返回的標頭是：

Access-Control-Allow-Origin: [some_origin]
Access-Control-Allow-Credentials: true 

您可以通過以下方式返回第一個標頭：使用服務器腳本獲取Referer，從Referer中檢索來源，然后使用腳本返回標頭。 在PHP中，我們可以這樣做，如下所示：

$urllist = parse_url($_SERVER['HTTP_REFERER']);
$origin = $urllist['scheme'] . '://' . $urllist['host'];
header("Access-Control-Allow-Origin: " . $origin);

更新：您應該閱讀Access-Control-Allow-Origin多源域 ，特別是此答案 。 如果可以訪問httpd.conf，則可能不需要PHP文件。

無論如何，您的網址不應為圖片，而應為PHP腳本的網址。

url: 'http://desbest.uk.to/clickrobot/somescript.php'

在您的php腳本中，您檢索請求的來源（將是書簽所在的頁面。然后您可以輸出帶有來源的標頭。不管書簽在何處出現，它都應該始終與正確的標頭有關。

我不確定，即使您指定了正確的標題，授權對話框是否也會使用Ajax彈出。 因此，這就是為什么我們在下面查看Diigo。

---

Diigo使用另一種方法，即：單擊“登錄”后， JSONP用於請求由其服務器上的服務器端腳本（例如PHP）生成的javascript文件。 JSONP是CORS的替代方法。 與Ajax請求不同，頁面標題中可以包含其他JavaScript文件，完全沒有問題。

如果用戶未登錄，則請求javascript文件將發送一個401標頭，在該標頭上顯示“身份驗證”對話框（這是在服務器端腳本中編碼的 ！）。 用戶輸入他/她的詳細信息，並根據輸入的信息返回javascript文件的內容。 如果用戶成功登錄，則可能返回類似callback({ signedin : 1}) ，否則返回callback({ signedin : 0}) 。

現在，將調用具有某些參數的javascript函數回調。 如果用戶已登錄，我們將顯示小書簽的內容。

---

放到htaccess中的內容：未經測試，但是您想允許所有來源，並將“ Access-Control-Allow-Origin”標頭設置為來源的值。 我相信這應該可以解決問題：

SetEnvIf Origin "^(.*)$" ORIGIN_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_DOMAIN}e" env=ORIGIN_DOMAIN