Ajax CORSプリフライトでhttp 401でリクエスト

Question

私は今何時間も苦労しています。

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); 
     } 
     }); 
    } 
    }); 
}); 

が、私はサーバーサイドに関連するすべてのCORSヘッダーを設定：私は別のドメインへの単純なAJAX要求を行うが、HTTP 401エラーのすべての時間を取得したいです。ここでは、ネットワークトラフィックがある：

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 

私はこのトピックに関する記事がたくさんあることを知っているが、私は、単純な何かが欠けてるようです。誰か助けてくれますか？

Answer 1

更新日私は正しくはなかったようです。 OPTIONSリクエストでは、Authorizationヘッダーは送信されません。 comment by sideshowbarkerをご覧ください。サーバーが401〜OPTIONSリクエストで応答しないようにする必要があります。

サーバーの言語はわかりませんが、誤った方法で認証を実装しました。OPTIONSメソッドを認証から除外する必要があります。また、ここを参照してください - OPTIONS request authentication以下

は時代遅れの答えです：

あなたのサーバー側でこの要求のHTTP基本認証を必要とします。そしてあなたは資格情報を提供しません。 401エラーはCORSとは関係ありません。認証資格情報を提供していないため、サーバーが要求を承認しないことを選択したことを意味します。

ブラウザで直接（https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/1.jsonのように）このURLを開こうとすると、ブラウザがWWW-Authenticateヘッダーで401エラーを処理する方法である&パスワードを、ログイン入力するように求められます。

実際にはAuthorizationヘッダーはリクエストに含まれていません。

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

をそしてAuthorizationヘッダリクエストに提示していることを確認してください： だから代わりにbeforeSendフックを使用しての、あなたはおそらく自分のコールで直接ヘッダーを含める必要があります。

Answer 2

このようなヘッダにクロスドメインを追加してください：

$.ajax({ 
     url: "https://dev.radbonus.com/admin/affiliate-connections/retrieveSingle/"+challengeid+".json", 
     method: "GET", 
     dataType: "json", 
     jsonp: false, 
     contentType: "application/json", 
     xhrFields: { 
      withCredentials: true 
     }, 
     crossDomain: true, 
     beforeSend: function(xhr){ 
      xhr.setRequestHeader("Authorization", "Basic "+ btoa(username+":"+password)); 
xhr.setRequestHeader("Access-Control-Allow-Origin",'*'); 
     }, 
     success: function(data){ 
      $('#codepressHock').html(data.data.code); 
     }, 
     error: function(error){ 
      alert(error); 
     } 
     });