jQuery.AJAX 使用 GET 而不是 POST答案

【问题标题】：jQuery.AJAX uses GET instead of POSTjQuery.AJAX 使用 GET 而不是 POST
【发布时间】：2016-12-25 22:24:33
【问题描述】：

我有一个非常简单的运行 jQuery 的 HTML 页面，它试图发布到 REST API。这是我的代码。

<script type="text/javascript" language="javascript">
    var user = 'someuser';
    var pass = 'somepassword';
    var payload = {
        "value1": "first value",
        "value2": "second value"
    };
    var rootUrl = 'http://someinternalserver:8888/api/Method';
</script>
<script language="javascript" type="text/javascript" id="postWtnBlock">
    function postValue_Go() {
        $.ajax({
            url: rootUrl,
            // Removing the next line or changing the value to 'JSON' results in an OPTIONS request.
            dataType: 'JSONP',
            data: JSON.stringify(payload),
            method: 'POST',
            user: user,
            password: pass,
            beforeSend: function (req) {
                req.setRequestHeader('Authorization', 'BASIC ' + btoa(user + ':' + pass));
            },
            success: function (data) {
                alert(data);
            },
            error: function (xhr) {
                alert(xhr.status + ' ' + xhr.statusText);
            }
        });
    }
</script>

这里发生了两件事。

1) 每个请求都作为 GET 请求发送，而不是 POST。 2) Authorization Header 永远不会进入请求；它总是丢失。

我不知道这是为什么。

更新 #1： 新的 postValue_Go() 看起来像这样...

    function postValue_Go() {
        $.ajax({
            url: rootUrl,
            data: JSON.stringify(payload),
            method: 'POST',
            username: user,
            password: pass,
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                alert(data);
            },
            error: function (xhr) {
                alert(xhr.status + ' ' + xhr.statusText);
            }
        });
    }

这是 Fiddler 中捕获的原始请求：

POST http://someinternalserver:8888/api/Method/ HTTP/1.1
Host: someinternalserver:8888
Connection: keep-alive
Content-Length: 693
Accept: */*
Origin: http://devserver
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://devserver/samples/ExternalAPI/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: someCookieValue=Boo; someOtherCookieValue=Yum;

{"value1": "first value","value2": "second value"}

还有原始响应，也可以在 Fiddler 中捕获。

HTTP/1.1 401 Unauthorized
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 19 Aug 2016 17:12:29 GMT
Content-Length: 61

{"Message":"Authorization has been denied for this request."}

【问题讨论】：

这个api返回jsonp吗？以及为什么不添加 [stackoverflow.com/questions/7613815/… 回调）。你能分享屏幕，网络->xhr 吗？
如果我将数据类型从 JSONP 更改为 JSON，问题就变成了一个 OPTIONS 请求。
JSONP 是一个 GET 请求，这就是 JSONP 的工作原理。

标签： javascript jquery ajax rest

【解决方案1】：

它是作为 GET 请求发送的，因为 JSONP 将带有 src 属性的脚本附加到您的网页，该属性指向 Web 服务（执行 GET 请求），然后返回包含请求数据的脚本，所有这些数据都捆绑在回调中功能。

显然，如果您愿意使用 iframe 等做一些重要的工作，则可以通过 JSONP 执行 POST 请求（请参阅here），但对于大多数意图和目的，您将仅限于 GET 请求.

永远不会设置授权标头，因为目前无法修改为要添加到页面的脚本而发送的标头。

【讨论】：

如果我删除JSONP，生成的请求就会变成OPTIONS 请求。
@amber 我相信那是因为您正在设置自定义标题。见here
那做了一些事情。我注释掉了 beforeSend 处理程序，实际上得到了 POST 但服务器返回 401 Not Authorized。查看原始请求，我没有看到使用 user 和 password 设置值设置的任何授权信息。
我认为user 字段应该是username，您可能还想添加xhrFields: { withCredentials: true}，但我不太确定。
在Settings 中查找$.Ajax，你是对的，应该是username，这样就解决了。我添加了您建议的 xhrField。我仍然没有在请求中看到授权标头。