来自 jQuery Ajax 的 403 错误（但不是来自 XMLHttpRequest）答案

【问题标题】：403 error from jQuery Ajax (but not from XMLHttpRequest)来自 jQuery Ajax 的 403 错误（但不是来自 XMLHttpRequest）
【发布时间】：2017-05-06 00:37:03
【问题描述】：

我有两个 Ajax 调用，一个使用 XMLHttpRequest，一个使用 jQuery。第一个成功完成。第二个似乎成功完成（调用了成功函数），但以抛出 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 错误。

谁能看出问题？

【问题讨论】：

仅供参考 Access-Control-Allow-* 标头由服务器而不是客户端设置，因此在您的 ajax 请求中设置这些标头不会有任何效果
很高兴知道。谢谢！

标签： javascript jquery ajax

【解决方案1】：

403 错误可能是因为它没有正确接收用户名/密码。这可能是因为您正确设置了dataObject。在这种情况下，它应该被设置为一个查询字符串，而不是一个 JSON 对象。

而不是这个：

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

试试这个：

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

或者，如果你想花哨，使用jquery的serialize：

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

【讨论】：

感谢您的建议。当我尝试这两个时，都导致调用失败函数 - 说无法在 Web 服务中解析 JSON。使用原始方法，我能够在结果对象中看到成功返回的预期结果（我只是在回显用户名/密码）。但是在显示预期结果后，我得到了 403 错误。
返回结果和预期数据时，响应状态是403吗？还是在显示结果后执行第二个 ajax 调用？
听起来好像正在对服务器进行第二次调用，导致 403 错误。调用是由单击提交按钮的表单元素触发的吗？您可能需要在方法结束时 return false; 和/或接受点击处理程序的事件参数并执行 event.preventDefault(); 以防止表单与 ajax 调用一起提交

【解决方案2】：

想通了。我在一个表单中有我的用户名和密码输入元素。因此，Ajax 调用已提交并成功完成。然后，表单正在提交并且没有 x-api-key 标头，所以它失败了。

【讨论】：