Accessing ArcGIS data over HTTP

I am attempting am building a map data React app using GIS data. I am accessing public GIS endpoints.

The endpoint is http://gis.infrastructure.gov.au/infrastructure/rest/services/KeyFreightRoute/KFR/MapServer/0

On local development, it is working fine. However, once pushed to live it returns the error: net::ERR_CONNECTION_REFUSED. Due to it being an HTTP endpoint.

The ArcGIS docs describe a solution using config, and I have included the following code:

    esriConfig.request.interceptors.push({
      // set the `urls` property to the URL of the FeatureLayer so that this
      // interceptor only applies to requests made to the FeatureLayer URL
      urls: featureLayerUrl,
      // use the BeforeInterceptorCallback to check if the query of the
      // FeatureLayer has a maxAllowableOffset property set.
      // if so, then set the maxAllowableOffset to 0
      before: function (params) {
        if (params.requestOptions.query.maxAllowableOffset) {
          params.requestOptions.query.maxAllowableOffset = 0;
        }
      },
      // use the AfterInterceptorCallback to check if `ssl` is set to 'true'
      // on the response to the request, if it's set to 'false', change
      // the value to 'true' before returning the response
      after: function (response) {
        if (!response.ssl) {
          console.log('not ssl');
          response.ssl = true;
        }
      },
    });

However, it still isn’t working!? In fact, the console.log(‘not ssl’) isn’t even logging on the live site (but it is logging on localhost).

How do you access HTTP GIS endpoints?