Forum Discussion

Kev_B's avatar
Kev_B
Advisor
4 months ago

400/404 error on POST request

Hey,

I'm trying to do my very first POST API call and currently getting stuck. I know there are other solutions for what I'm trying to do, but I'm also trying to learn something rather than straight up copying & pasting.

 

<#assign boardID = coreNode.id />

<button id="subscribe">Subscribe</button>

<@liaAddScript>
  (function($){
    $(document).ready(function(){
      $("#subscribe").on( "click", function() {
        $.ajax({
	  url: "/api/2.0/subscriptions",
	  dataType: 'json',
	  data: {
	    "data":{
	      "type":"subscription",
	      "target":{
	        "type":"board",
                "id":"blueprints"
	      }
	    }
	  },
	  method: 'POST'
	}).done(function(response) {
	  console.log('Success');
	}).fail(function() {
	  console.log('Fail');
	})
      });
    });
  })(LITHIUM.jQuery);
</@liaAddScript>

 

 

When I click my button on the page, I get a 404 error in the console:

GET https://community-stage.blueprism.com/api/2.0/subscriptions?data%5Btype%5D=subscription&data%5Btarget%5D%5Btype%5D=board&data%5Btarget%5D%5Bid%5D=blueprints 404 (Not Found)

I assume I'm doing something wrong, but I can't figure out what. I've tried subbing the variable for the ID of the board too and the URL is the same, with the same 404 error.

The only thing that's sprung to mind is that the API's don't work with the CNAME and I need to use the original domain for our staging site?

Thanks in advance.

  • Claudius's avatar
    Claudius
    3 months ago

    It also took me a bit of back and forth to get it working. Reasons are due to Khoros Classic using an older version of jQuery and some specific JSON requirements:

    1. Since Classic's jQuery version is older you need to use type: "POST" instead of method: "POST"
    2. The contentType "application/json" needs to be specified
    3. data parameter needs to be stringified (you already were on the right tracke with your v2)

    Here's the resulting evolution of your v1 code that works on my end:

    <#assign boardID = coreNode.id />

<button id="subscribe">AJAX test</button>

<@liaAddScript>
  (function($){
    $(document).ready(function(){
      $("#subscribe").on( "click", function() {
        $.ajax({
	  url: "/api/2.0/subscriptions",
	  contentType: "application/json",
	  dataType: 'json',
	  data: JSON.stringify({
	      type:"subscription",
	      target:{
	        type:"board",
                id:"blueprints"
	    }
	  }),
	  type: 'POST'
	}).done(function(response) {
	  console.log('Success');
	}).fail(function() {
	  console.log('Fail');
	})
      });
    });
  })(LITHIUM.jQuery);
</@liaAddScript>

    Bonus tip:
    Looking at the details in your browser's network tab will reveal that quite often the HTTP error code is hiding a different more detailed "developer message" debug info in the return data. E.g. here's a HTTP 500 error that is hiding a message about non-stringified content:

     

  • Claudius's avatar
    Claudius
    Boss
    3 months ago

    It also took me a bit of back and forth to get it working. Reasons are due to Khoros Classic using an older version of jQuery and some specific JSON requirements:

    1. Since Classic's jQuery version is older you need to use type: "POST" instead of method: "POST"
    2. The contentType "application/json" needs to be specified
    3. data parameter needs to be stringified (you already were on the right tracke with your v2)

    Here's the resulting evolution of your v1 code that works on my end:

    <#assign boardID = coreNode.id />

<button id="subscribe">AJAX test</button>

<@liaAddScript>
  (function($){
    $(document).ready(function(){
      $("#subscribe").on( "click", function() {
        $.ajax({
	  url: "/api/2.0/subscriptions",
	  contentType: "application/json",
	  dataType: 'json',
	  data: JSON.stringify({
	      type:"subscription",
	      target:{
	        type:"board",
                id:"blueprints"
	    }
	  }),
	  type: 'POST'
	}).done(function(response) {
	  console.log('Success');
	}).fail(function() {
	  console.log('Fail');
	})
      });
    });
  })(LITHIUM.jQuery);
</@liaAddScript>

    Bonus tip:
    Looking at the details in your browser's network tab will reveal that quite often the HTTP error code is hiding a different more detailed "developer message" debug info in the return data. E.g. here's a HTTP 500 error that is hiding a message about non-stringified content:

     

    • Kev_B's avatar
      Kev_B
      Advisor
      2 months ago

      Thank you so much for this Claudius I ended up solving this particular problem a different way, but your code provided me the perfect template for another subscription button that was further down my to-do list. Appreciate your help and for explaining things so well.

  • Kev_B's avatar
    Kev_B
    Advisor
    4 months ago

    I've made a few revisions - mostly stabs in the dark, but got rid of the 404 response. Now I'm getting 400 (Bad Request) in response from the API. Would really appreciate if anybody who's been through similar growing pains is able to share some wisdom. I don't understand why it's unhappy with the request.

    <#assign boardID = coreNode.id />

<button id="subscribe">Subscribe</button>

<@liaAddScript>
  (function($){
    $(document).ready(function(){
      $("#subscribe").on( "click", function() {
        $.ajax({
          type: 'post',
          url: "/api/2.0/subscriptions",
          dataType: 'json',
          data: JSON.stringify({
            "type":"subscription",
          "target":{
            "type":"board",
            "id":"${boardID}"
            }
          })
        }).done(function(response) {
          console.log('Success');
        }).fail(function(response) {
          console.log('Fail');
        })
      });
    });
	})(LITHIUM.jQuery);
</@liaAddScript>

     

    • MattV's avatar
      MattV
      Khoros Staff
      3 months ago

      Check the network request tab when this is sent; I suspect the payload is incorrect. 

      The docs say the JSON body should look like

      {
  "data": {
    "type": "subscription",
    "target": {
      "type": "board",
      "id": "some-board"
    }
  }
}

      but I suspect your payload will look like

      {
  "type": "subscription",
  "target": {
    "type": "board",
    "id": "some-board"
  }
}

      and you're being mislead that the parameter for passing data is "data", but you also need to include "data" as part of the JSON itself.