jQuery Ajaxから403エラー（XMLHttpRequestからではありません）

Question

2つのAjax呼び出しがあります.1つはXMLHttpRequestを使用し、もう1つはjQueryを使用しています。最初のものは正常に完了します。 2番目は正常に完了したように見えますが（成功関数が呼び出されます）、403エラーがスローされて終了します。

のXMLHttpRequest（作品）のコードは次のとおりです。

function myfunction() { 

    var apikey = document.getElementById("apikey").value; 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 

    xmlHttpReq = new XMLHttpRequest(); 

    xmlHttpReq.onreadystatechange = function() { 
     if (xmlHttpReq.readyState == 4) { 
      if (xmlHttpReq.status == 200) { 
       document.getElementById("results").textContent = xmlHttpReq.responseText; 
       alert(xmlHttpReq.responseText); 
      } 
      else { 
       alert(xmlHttpReq.statusText); 
      } 
     } 
    } 

    xmlHttpReq.open("POST" , url , true); 
    xmlHttpReq.setRequestHeader("Content-Type", "application/json"); 
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Origin","*"); 
    xmlHttpReq.setRequestHeader("x-api-key" , apikey); 
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Methods", "POST,OPTIONS"); 
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Headers", "Origin,Accept,X-Requested-With,Content-Type,X-Amz-Date,Authorization,x-api-key,X-Amz-Security-Token"); 
    xmlHttpReq.send('{ "username" : "' + username + '" , "password" : "' + password + '" }'); 

} 

403エラーを返すjQueryのためのコードは次のとおりです。

$("#jquerySubmit").click(function() { 

    var apikey = $("#apikey").val(); 
    var username = $("#username").val(); 
    var password = $("#password").val(); 

    var dataObject = '{ "username" : "' + username + '" , "password" : "' + password + '"}'; 

    $.ajax({ url : url , 
       type : 'POST' , 
       dataType: 'json' , 
       headers : { 
       'Access-Control-Allow-Origin' : "*" , 
       'x-api-key' : apikey , 
       'Access-Control-Allow-Methods' : 'POST,OPTIONS', 
       'Access-Control-Allow-Headers' : 'Origin,Accept,X-Requested-With,Content-Type,X-Amz-Date,Authorization,x-api-key,X-Amz-Security-Token' 
       }, 
       success: function (result) { 
        alert(result.body); 
       }, 
       error: function (error) { 
        alert(error.responseText); 
       }, 
       data : dataObject 
    }); 
}); 

成功警告文のが正常を発射し、 は、期待される結果をと表示しますが、403エラーをスローします。

誰に問題が見られますか？

Answer 1

403エラーがユーザー名とパスワードを正しく受信していない可能性があります。これはおそらく、dataObjectを正しく設定しているためです。このコンテキストでは、JSONオブジェクトではなくクエリ文字列のように設定する必要があります。これに代えて

：

var dataObject = '{ "username" : "' + username + '" , "password" : "' + password + '"}'; 

はこれを試してみてください：

var dataObject = 'username='+username+'&password='+password; 

それとも、あなたは空想になりたい場合は、使用するjQueryのserializeは：

var dataObject = $("#username,#password").serialize(); 

Answer 2

はそれを考え出しました。フォーム内にユーザー名とパスワードの入力要素がありました。 Ajaxコールが送信され、正常終了しました。その後、フォームが提出され、x-api-keyヘッダーがないため、失敗していました。