Question

我具有以下方法，该方法在包含具有URL属性（floodAreaData [0] .polygon）的对象的数组上进行迭代，该属性是通过XMLHttpRequest获取的，其结果将传递给loadFloodAreaPolygon函数。 / p>

这按预期工作，我遇到的问题是其中一个URL返回404，并导致在控制台窗口中显示以下错误：

Access to XMLHttpRequest at 'https://environment.data.gov.uk/flood-monitoring/id/floodAreas/051WACDV5B3a/polygon' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我花了很多时间来尝试实施CORS政策，而没有任何运气和增加的挫败感。

我的问题是我可以重新设置XMLRequest以便从下一个可用URL继续处理吗？我尝试添加一个try catch块，但是由于某些原因，在我测试时，其中的消息没有打印到控制台。

function getFloodAreaPolygon() {
  try {
    if (floodAreaData.length > 0) {
      let request = new XMLHttpRequest();
      let url = floodAreaData[0].polygon;
      request.open("GET", url, true);
      request.onload = function () {
        let data = JSON.parse(this.response);
        if (request.status >= 200 && request.status < 400) {
          data.features.forEach(geojsonFeature => {
            loadFloodAreaPolygon(floodAreaData[0], geojsonFeature);
            floodAreaData.shift();
            getFloodAreaPolygon();
          });
        } else {
          console.log("error");
        }
      };
      request.send();
    }
  } catch {
    console.log("request error");
  }
}

Answer 1

仅在请求成功时才触发load事件。如果不是，则会收到一个错误事件。

如果存在网络错误或CORS错误，则XHR对象的状态将为0。您无法区分来自JS的状态0错误类型（开发者控制台将显示更多信息，但无法在其他人的计算机上运行您的代码）。

因此，编写一个错误处理程序，测试一下状态是否为0，是否为：调用将使您的代码请求“下一个可用URL”的任何函数（尚不清楚您的代码如何在排名第一，但我想这将涉及调用getFloodAreaPolygon并传递一个参数以使其在行let url = floodAreaData[0].polygon;上使用不同的索引。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/404");
xhr.addEventListener("error", event => {
  console.log({event, xhr});
  if (xhr.status === 0) {
    console.log("Network or CORS error");
    // continue processing from the next available URL
  }
});
xhr.send();

收到404响应后重新启动XMLHttpRequest

1 个答案: