将AJAX或XHR POST请求转换为AngularJS $ http POST请求

时间:2017-11-16 20:09:13

标签: javascript angularjs ajax jenkins cors

我见过类似的事件,例如this。但是,它们似乎都没有遇到我遇到的同样问题:发出POST请求并获得500 Internal Server Error作为响应。

我试图将我从邮差命令生成的以下AJAXXHR转换为使用$http服务的AngularJS方法:

xhr:

var data = "json=<lots of encoded text>";

            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;

            xhr.addEventListener("readystatechange", function () {
              if (this.readyState === 4) {
                console.log(this.responseText);
              }
            });

            xhr.open("POST", "https://myJenkins.com/job/Ansible_Deploy/build?token=<build_token>");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.setRequestHeader("Authorization", "Basic <auth data>");

            xhr.send(data);

ajax:

var settings = {
                "async": true,
                "crossDomain": true,
                "url": "https://myJenkins.com/job/Ansible_Deploy/build?token=<build_token>",
                "method": "POST",
                "headers": {
                  "content-type": "application/x-www-form-urlencoded",
                  "authorization": "Basic <auth data>"
                },
                "data": {
                  "json": "<raw json text>"
                }
              };

              $.ajax(settings).done(function (response) {
                console.log(response);
              });

破碎的AngularJS实施:

var heads = new Headers();
            heads.append('Content-Type', 'application/x-www-form-urlencoded');
            heads.append('Authorization', 'Basic <auth data>');

            $http({
                url: "https://myJenkins.com/job/Ansible_Deploy/build?token=<build token>",
                method: "POST",
                data: <json object>,
                headers: heads

            }).then(function successCallback(response) {
                console.log(response.data);
            }, function errorCallback(response) {
                console.log(response.statusText);
            });

上述两种Ajax和xhr实现都可以正常工作。如上所述,角度方法给了我500内部服务器错误。

为什么会发生这种情况的任何想法?如果有帮助,我可以提供具体信息,例如Chrome检查员网络标签中的信息。只是让我知道我应该截取屏幕截图,并在此处发布。

编辑:正如评论中所承诺的,我的解决方案如下。

$http({
        url: "https://myJenkins.com/job/Ansible_Deploy/build?token=<build token>",
        method: "POST",
        data: 'json=' + JSON.stringify(data),
        headers: {
            'Accept': "*/*",
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic <auth data>'
        }

    }).then(function successCallback(response) {
        console.log(response.data);
    }, function errorCallback(response) {
        console.log(response.statusText);
    });

编辑2:如果你偶然发现这个问题,因为你还得到500 Internal Server Error并且仍然不了解这是如何解决的,那么通过确保CORS的组合解决了这个问题在包含端点的服务器上设置(由Crome的检查员指出抛出Access-Control-*错误)以及正确格式化x-www-form-urlencoded以使Jenkins接受,这需要发送数据形式为json={"parameter":[{"name":<key>, "value":<value>}, ...]}。此外,如果条目的value是嵌套的,则需要转义。有关详细信息,请参阅this answer

0 个答案:

没有答案