Using JQuery to access SonarQube Web API

Question

My goal is to provide a dashboard page (HTML) with specific metrics for a list of projects. To do this, I plan on using JQuery to retrieve and display those metrics.

So, I am trying to set up a JQuery function to retrieve data from SonarQube Web API for a given component, and am having issues getting the Authorization correct. I can pull the data I want with curl but cannot get the call JQuery to work.

This works (with appropriate definitions of THIS_IS_MY_TOKEN and MY_SERVER and COMPONENT):

curl -Ssu ${THIS_IS_MY_TOKEN}: "https://${MY_SERVER}/api/measures/component?component=${COMPONENT}&metricKeys=coverage"

But when I put this into an HTML document (with jquery/3.3.1 loaded) and load it in Chrome (with the same definitions for each of the variables) - I get a 401 error:

$.ajax({
    url:  `https://${MY_SERVER}/api/measures/component`,
    crossDomain: true,
    dataType: 'jsonp',
    headers: {
        'Authorization': 'Basic ' + btoa(THIS_IS_MY_TOKEN),
    },
    data: {
        component : `${COMPONENT}`,
        metricKeys : 'coverage',
    },
});

I even tried skipping the token and using my user and password:

        'Authorization': 'Basic ' + btoa(`${USER}:${PW}`)

All with the same results -> 401.

Note: Chrome developer tools show a 401 response while Firefox shows 200 - for the same code. So I started to dump the response code directly from the ajax call, and both browsers agree 404.

Further testing - I used the Chrome developer tools to Copy as cURL the request, and pasted it on the command line (with all its glorious headers). I had to add the -u ${THIS_IS_MY_TOKEN}: to the request as the copy/paste did not include the Authorization header (is this a known thing for security reasons?) - and it worked!

To me, this is just further evidence that it is an issue with how I am adding the header.

Any hints as to what I am missing in the JQuery?