How can I implement API calls using AJAX?

Question

I'm new to API, and I have watched couple tutorials on how can I use AJAX to call an API. I'm currently having an error on console when I call the function.

jquery.min.js:4 Mixed Content: The page at 'https://localhost:44399/Modules/EventManager' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxxx.xxxx.xxx:xxxx/GetLeaveBalance/2170'. This request has been blocked; the content must be served over HTTPS.

This API is provided by someone, so I have no control over it. My JS looks like this.

EventManager.GetLeaveBalance = function (idemployee) {
    $.ajax({
        url: "http://xxxx.xxxx.xxx:xx/GetLeaveBalance/" + idemployee,
        type: "GET",
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
           
            
            console.log(data);
        }
    });
}

But when I go to API url with supplied parameters directly from browser it works.

"his request has been blocked; the content must be served over HTTPS." — OldProgrammer, Apr 05 '22 at 00:34
Does this answer your question? [Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?](https://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire) — Phil, Apr 05 '22 at 00:35

score 0 · Answer 1 · answered Apr 05 '22 at 00:34

Are you sure the API doesn't use HTTPS? That is, could you just do

url: "https://xxxx.

instead?

If not - and if your site is on HTTPS, and you don't want to revert to HTTP - which is quite reasonable - but the API endpoint is only served over HTTP, there are a couple options:

Bug whoever hosts the API to switch it over to HTTPS. It's really weird for an API intended for consumption to be only offered over HTTP because it prevents users on HTTPS sites from using the API (and the vast majority of professional sites require HTTPS). I'd consider an API to be broken if the only connection it offers is insecure.
Instead of making a request to the API from the client on your site, instead make a request to your own site, and have your backend request the HTTP endpoint, then relay the response back to your client. (This is the same sort of approach one would often use when dealing with CORS issues) The mixed content restriction applies to browsers, but your own server should have no problems hitting an HTTP endpoint.

Yes the API doesn't use HTTPS. How can I achieve the second option? — John Phillip Abello, Apr 05 '22 at 00:41
It depends on what language you're using in the backend. For Node, for example, you can use [axios](https://www.npmjs.com/package/axios) or node-fetch. For Python you can use [Requests](https://docs.python-requests.org/). Etc — CertainPerformance, Apr 05 '22 at 00:42
See https://learn.microsoft.com/en-us/aspnet/core/fundamentals/http-requests — CertainPerformance, Apr 05 '22 at 00:45

How can I implement API calls using AJAX?

1 Answers1