Can't send POST request to a REST API from a Chrome extension

Question

I'm writing a Chrome extension for my sales department to help transfer leads from one Freshsales account to the other, and I use their RESTful API to achieve that. GET requests are working just fine, but I can't seem to make any POST (or even PUT) requests.

The response is always either "422 Unprocessable Entity" (when I try to stringify the JSON I'm trying to send), or "500 Internal Server Error" (when I try to send the JSON as is). The weird thing is that the problem is not with the endpoint - I can successfully make POST requests to it from a Node.js app and even using cURL. So I assume it has to have something to do with the extension.

The code below uses JQuery Ajax to send the request, however I also tried this with fetch, XmlHTTPRequest, and I even tried using Axios just for good measure. Nothing works.

This is an extract with the test function from my popup.js file (it was previously in a content.js , and it didn't work just the same):

$.post({
    url: "https://{domain}.freshsales.io/api/leads",
    headers: {
      "Authorization": "Token token={api_token}",
      "Content-Type": "application/json"
    },
    data: {"lead":{"first_name":"James","last_name":"Testson","email":"james.test@gmail.com","company":{"name":"Business Inc."}}}
  }).then(function(res){
    console.log(res);
  }, function(err){
    console.log(err);
  });
}

Here's my manifest.json (this is an edited example from the tutorial, so there's probably some unnecessary permissions)

  {
    "name": "Lead Transfer Tool",
    "version": "1.0",
    "description": "guess what it does",
    "permissions": [
      "activeTab", "declarativeContent", "storage", "https://*/*"
    ],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html"
    },
    "manifest_version": 2
  }

The biggest problem is that I can't even debug this properly - the response is either a single error code (in case of error 422), or an entire HTML page that basically says "Something went wrong, we're sorry, etc." (in case of error 500). Is there something specific that has to do with Chrome extensions? Or maybe I'm just looking in the wrong direction?

Answer 1

In this i use content.js to do all thing i need Maybe this helpful with you:

        let xml = new XMLHttpRequest();
        xml.open('POST', "https://localhost:44311/crawler/hsx", true);
        xml.setRequestHeader("Content-Type", "application/json; charset = UTF-8");//t think this is main problem cause your error
        xml.onreadystatechange = function () {
            if (xml.readyState == 4) {
                console.log("Success!");
            }
        }
        xml.send(JSON.stringify(arrObj[i]));
    }

You can indicate my disadvantage too, thank u!