克服 CORB 对旧 API 的限制？

Question

尝试在此处卸载从 NJTransit API 获取更新的公交车位置的一些任务 -- 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);

有什么办法解决这个问题吗？我知道这是一个基于浏览器的问题，我可以从服务器发出调用，一切都会好起来的，但这正是我想要摆脱的。当前的解决方案是从服务器获取这些更新并通过我自己的服务器 API 将它们传递给客户端。我想把自己排除在中间人之外，让客户自己获取更新的位置。

让数据源 (NJT) 对其 API 设置进行任何更改的可能性非常低。

谢谢

Answer 1

请检查：

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);

我已将您的代码更改为使用 CORS 代理。

请查看@CodePen： https://codepen.io/animatedcreativity/pen/b5796c4b3711b6f8d6437beff0c2c40a

示例 XML 响应：

<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>
...

克服 CORB 对旧 API 的限制？

Overcoming CORB restrictions on an old API?

javascript

xml

cors

transit