2

I've seen similar incidents such as this. However, none of them seem to encounter the same problem I am having: Making a POST request and getting a 500 Internal Server Error in response.

I'm attempting to convert either of the following AJAX or XHR that I generated from a postman command to the AngularJS method of using the $http service:

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

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

The broken AngularJS implementation:

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

Both of the above Ajax and xhr implementations work fine. As mentioned above, the angular approach is giving me a 500 Internal Server Error.

Any ideas why this may be happening? I can provide specifics if they may help, such as information from the network tab on the chrome inspector. Just let me know what I should take a screenshot of and I'll post it here.

EDIT: As promised in the comments, my solution is below.

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

EDIT 2: If you stumble upon this question because you're also getting a 500 Internal Server Error and still don't understand how this was resolved, then it was resolved via a combination of ensuring that CORS was setup on the server containing the endpoint (indicated by Crome's inspector throwing Access-Control-* errors) as well as correctly formatting the x-www-form-urlencoded to be accepted by Jenkins, which requires the data being sent to be of the form json={"parameter":[{"name":<key>, "value":<value>}, ...]}. Furthermore, if the value of an entry is a nested then escaping is required. see this answer for more details.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Darrel Holt
  • 870
  • 1
  • 15
  • 39
  • 1
    I don't think angular's $http understands the `Header` class that was built for the fetch api in the first place, convert it to an regular object instead. I believe the `Content-Type` sent with $http is `application/json` if i'm not mistaking – Endless Nov 16 '17 at 20:15
  • @Endless I changed it to `headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Basic ' }` and I still get the same problem – Darrel Holt Nov 16 '17 at 20:17
  • 1
    Then i suggest you inspect the requests in the network tab in your browser that is made with both of them, look at the headers and also the raw body that was sent. If it's to any help: right click in chrome on the request and copy as curl and compare them or even paste them here – Endless Nov 16 '17 at 20:22
  • 1
    Think this can be of help: [How do I POST urlencoded form data with $http?](https://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http) – Endless Nov 16 '17 at 20:23
  • 1
    change data to something like: `data: new URLSearchParams({json: ''})` – Endless Nov 16 '17 at 20:26
  • 2
    or more backward compitable `data: "json=" + encodeURIComponent(rawJson)` – Endless Nov 16 '17 at 20:27
  • None of them worked on my first attempt, but I'll play with your suggestions a bit and use that link as well. thanks for the help, I'll post here with my solution if I get it working – Darrel Holt Nov 16 '17 at 20:34
  • @Endless I added my final solution to the main question as an edit. Since I found the correct way via a combination of your comments and your question [here](https://stackoverflow.com/questions/12131659/from-jquery-ajax-to-angular-http), if you'd like, you can post a summation of your comments as an answer and I'd be happy to accept it. – Darrel Holt Nov 17 '17 at 00:10

0 Answers0