0

The post method given below POSTs to a webhook which accepts 4 parameters - fields[message], fields[name], fields[email] and fields[url].

The webhook runs successfully. It initially sends the 200 response back to the client. Then it parses the parameters passed and executes as per requirement. I have also added response-message: "{}" to the response on the webhook.

The status code returned is 200 everytime. And yet, the error callback gets invoked in Ajax call.

// Static comments
(function ($) {
  var $comments = $('.js-comments');

  $('#comment-form').submit(function () {
    var form = this;

    $(form).addClass('disabled');
    $('#comment-form-submit').html('Loading...');

    $.ajax({
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      data: $(this).serialize(),
      dataType: 'json',
      contentType: 'application/x-www-form-urlencoded',
      success: function (data) {
        $('#comment-form-submit').html('Submitted');
        $('#comment-form .js-notice').removeClass('notice--danger').addClass('notice--success');
        showAlert('<strong>Thanks for your comment!</strong> It will show on the site once it has been approved.');
      },
      error: function (err) {
        console.log(err);
        $('#comment-form-submit').html('Submit Comment');
        $('#comment-form .js-notice').removeClass('notice--success').addClass('notice--danger');
        showAlert('<strong>Sorry, there was an error with your submission.</strong> Please make sure all required fields have been completed and try again.');
        $(form).removeClass('disabled');
      }
    });

    return false;
  });

  function showAlert(message) {
    $('#comment-form .js-notice').removeClass('hidden');
    $('#comment-form .js-notice-text').html(message);
  }
})(jQuery);

This was giving me an Access-Control-Allow-Origin error, so I changed dataType: 'json', to dataType: 'jsonp',.

And now, the parameters being passed aren't getting parsed. And the error callback is still getting called. The webhook still returns a 200 status response code to the client.

The webhook runs from a YAML file, given below.

- id: "add-comment"
  execute-command: "./add-comment.sh"
  response-headers:
    - Access-Control-Allow-Origin: "*"
  response-message: "{}"
  pass-arguments-to-command:
    - source: payload
      name: fields[message]
    - source: payload
      name: fields[name]
    - source: payload
      name: fields[email]
    - source: payload
      name: fields[url]

I'm completely lost here. How do I get the success callback to be invoked? (status is 200, response body is {}, dataType is jsonp).

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Amith Raravi
  • 235
  • 3
  • 18
  • 1
    You cannot just change from JSON to JSONP to fix a No Access Control error. They are completely different response formats. If the third-party URL you're calling does not include CORS headers in the response then you will not be able to directly call it from client-side JS. You will need to proxy the request osmehow. – Rory McCrossan Oct 27 '18 at 13:09
  • Okay, I see now that this should be 2 questions. The primary question is still why the error callback is called for status 200 responses though! And as such, this can't be a complete duplicate of the other thread. – Amith Raravi Oct 27 '18 at 13:17
  • 1
    It is. You get a 200 because the request works. You're then blocked from reading the response by the browser's security due to the missing CORS headers and the Same Origin Policy. I would strongly suggest you research those topics. – Rory McCrossan Oct 27 '18 at 13:29
  • Okay, I'm getting some perspective on this. Thank you for your answer, @RoryMcCrossan ! You know, it's quite funny. Earlier I was using a webhook hosted by a 3rd party and this code worked. Now I try to run using my webhook and it is throwing all these cross-domain issues. Very weird. – Amith Raravi Oct 27 '18 at 13:47

0 Answers0