Overcoming CORB restrictions on an old API?

Trying to offload some fetching of updated bus positions from the NJTransit API here -- http://mybusnow.njtransit.com/bustime/map/getRoutePoints.jsp?route=87 -- which returns pretty rudimentary XML. No CORS header / policy as best I can tell, so Chrome is throwing an error and blocking the request with a pointer to this issue tracker.

route='87';

function logResult(result) {
  console.log(result);
}

function logError(error) {
  console.log('Looks like there was a problem: \n', error);
}

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

function readResponseAsXML(response) {
  let responseDoc = new DOMParser().parseFromString(response, 'application/xml');
  var oSerializer = new XMLSerializer();
  var buses_xml = oSerializer.serializeToString(responseDoc);
  return buses_xml;
}

function fetchXML(pathToResource) {
  fetch(pathToResource, {mode:'no-cors'}) // 1
  .then(validateResponse) // 2
  .then(readResponseAsXML) // 3
  .then(logResult) // 4
  .catch(logError);
}

fetchXML('http://mybusnow.njtransit.com/bustime/map/getRoutePoints.jsp?route='+ route);

Is there any way around this? I know it's a browser-based issue, and I can issue the call from the server and it will all be fine, but that's exactly what I'm trying to move away from. The current solution is fetching these updates from the server and passing them through to client via my own server API. I would like to cut myself out as the middleman and just have the clients fetch the updated positions themselves.

The likelihood of getting the data source (NJT) to make any changes to their API setup is very low.

Thanks

Please check this:

route='87';

function logResult(result) {
  console.log(result);
}

function logError(error) {
  console.log('Looks like there was a problem: \n', error);
}

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

function readResponseAsXML(response) {
  let responseDoc = new DOMParser().parseFromString(response, 'application/xml');
  var oSerializer = new XMLSerializer();
  var buses_xml = oSerializer.serializeToString(responseDoc);
  return buses_xml;
}

function fetchXML(pathToResource) {
  fetch(pathToResource, {}) // 1
    .then(validateResponse) // 2
    .then(readResponseAsXML) // 3
    .then(logResult) // 4
    .catch(logError);
}

fetchXML('https://cors-anywhere.herokuapp.com/http://mybusnow.njtransit.com/bustime/map/getRoutePoints.jsp?route='+ route);

I have changed your code to use CORS proxy.

Please check @ CodePen: https://codepen.io/animatedcreativity/pen/b5796c4b3711b6f8d6437beff0c2c40a

Example XML response:

<route>
        <id>87</id> 
        <rtpiFeedName></rtpiFeedName>
        <sn>87</sn> 
        <nm>87 Jersey City - Hoboken</nm> 
        <displayDesignator>87</displayDesignator> 
        <vmode>1</vmode>   

        <sbs>



        </sbs>

        <c>#ff0033</c>

        <pas>


            <pa>
                <id>3393</id>

                <d>Hoboken</d> 
                <dd>Hoboken</dd>  
                <directionRtpiFeedName></directionRtpiFeedName>

                <pt>
                    <lat>40.692060000000545</lat>
                    <lon>-74.0966800000009</lon>
                    <dtr>false</dtr> 

                    <bs>
                        <id>21028</id>
...