問題描述

我現(xiàn)在掙扎了好幾個小時.我想向另一個域發(fā)出一個簡單的 ajax 請求，但總是得到 http 401 錯誤:

I am struggling for hours now. I want to make a simple ajax request to another domain, but get http 401 Error all the time:

jQuery(document).ready(function($){
  var challengeid = $('#codepressHook').data('challengeid');
  var clicked = false;
  $('#codepressHook').click(function(){
    if(!clicked){
      $.ajax({
        url: "https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/"+challengeid+".json",
        method: "GET",
        dataType: "json",
        jsonp: false,
        contentType: "application/json",
        xhrFields: {
          withCredentials: true
        },
        beforeSend: function(xhr){
          xhr.setRequestHeader("Authorization", "Basic "+ btoa(username+":"+password));
        },
        success: function(data){
          $('#codepressHock').html(data.data.code);
        },
        error: function(error){
          alert(error);
        }
      });
    }
  });
});

我在服務(wù)器端設(shè)置了所有相關(guān)的 CORS 標(biāo)頭.這是網(wǎng)絡(luò)流量:

I set all relevant CORS headers on the serverside. Here is the network traffic:

Request URL:https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/45.json
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:185.102.94.230:443
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, X-Requested-With, Authorization, Origin
Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://radbonus.com
Access-Control-Max-Age:31536000
Content-Length:463
Content-Type:text/html; charset=iso-8859-1
Date:Sat, 24 Jun 2017 11:25:33 GMT
Server:Apache/2.4.18 (Ubuntu)
WWW-Authenticate:Basic realm="Admin"

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:dev.radbonus.com
Origin:http://radbonus.com
Referer:http://radbonus.com/plugintest/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

我知道有很多關(guān)于這個主題的帖子，但似乎我缺少一些簡單的東西.誰能幫幫我?

I know that there are a lot of posts on this topic, but it seems I'm missing something simple. Could anyone help me?

推薦答案

UPDATE 看來我說的不對.Authorization 標(biāo)頭永遠不會為 OPTIONS 請求發(fā)送.請參閱 sideshowbarker 的評論 - 您需要確保您的服務(wù)器不會以 401 響應(yīng) OPTIONS 請求.

UPDATE Looks like I was not right. Authorization header is never sent for OPTIONS request. Please see comment by sideshowbarker - you need to make sure that your server doesn't respond with 401 to OPTIONS request.

我不知道你的服務(wù)器是用什么語言編寫的，但是你以錯誤的方式實現(xiàn)了授權(quán) - OPTIONS 方法應(yīng)該從 auth 中排除.另請參閱此處 - OPTIONS 請求身份驗證

I don't know what language is your server written in, but you implemented authorization in the wrong way - OPTIONS method should be excluded from auth. Also see here - OPTIONS request authentication

以下是過時的答案:

您的服務(wù)器端需要對該請求進行 HTTP 基本身份驗證.而且您不提供憑據(jù).401錯誤與CORS無關(guān)；這只是意味著服務(wù)器選擇不授權(quán)您的請求，因為您沒有提供身份驗證憑據(jù).

Your serverside requires HTTP Basic authentication for this request. And you don't provide credentials. 401 error has nothing to do with CORS; it just means that the server chose to not authorize your request because you didn't provide auth credentials.

如果您嘗試打開此網(wǎng)址(如 https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/1.json) 直接在瀏覽器中，您將被要求輸入登錄名和密碼，這是瀏覽器使用 WWW-Authenticate 處理 401 錯誤的方式 標(biāo)題.

If you try to open this url (like https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/1.json) directly in browser, you will be asked to enter login&password, which is how the browser handles 401 error with WWW-Authenticate header.

請注意 Authorization 標(biāo)頭實際上并未包含在您的請求中.所以不要使用 beforeSend 鉤子，你應(yīng)該直接在你的調(diào)用中包含標(biāo)題:

Please notice that Authorization header is actually not included with your request. So instead of using beforeSend hook, you should probably just include header directly in your call:

headers: {
    'Authorization': 'Basic ' + btoa(username+':'+password),
},

并確保 Authorization 標(biāo)頭出現(xiàn)在您的請求中.

And make sure that Authorization header presents in your request.

這篇關(guān)于預(yù)檢中帶有 http 401 的 Ajax CORS 請求的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！