javascript - 由于源跨源读取阻止 (CORB)，JSON API 无法通过 fetch 进行检索

Question

我不断收到(settings.js:76 跨域读取阻止 (CORB) 阻止的跨域响应)错误。我使用 fetch 方法从 API 检索 JSON 数据，这是我的代码:

 function workUpdate() {
     let data = new FormData();
     let miles = $("radius").value / 1000;
     let zip = "";
     let cookies = document.cookie.split(";");
      for (let i = 0; i < cookies.length; i++) {
          let key = cookies[i].split("=");
          if (key[0].trim() == "zip") {
               zip = key[1];
          }
      }
      if (zip == "") {
          $("radius-error").innerHTML = "Please provide your zip code in the personal information tab."
      } else {
          let url = "https://www.zipcodeapi.com/rest/TrAEIfdiFRU4FNxY94su2FXgrXbCRud9mnfyWdubJSKM5Py7x0g5LjTTd46NXIo8/radius.json/" + zip + "/" + miles + "/mile";
            fetch(url, {mode:'no-cors'})
               .then(checkStatus)
               .then(JSON.parse)
               .then(handleWorkResponse)
               .catch(console.log);
      }
     
 }

function handleWorkResponse(response) {
     let locations = response[0]["zip_code"] + "-";
     for (let i = 1; i < response.length; i++) {
         locations += "-" + response[i]["zip_code"];
     }
     let data = new FormData();
     data.append("locations", locations);
     let url = "php/workupdate.php";
     fetch(url, {method: "POST", body: data, mode:'cors', credentials:'include'})
               .then(checkStatus)
               .then(function() {
                   location.reload();
               })
               .catch(console.log);
 }

Answer 1

更新:

正如 KevinB 在此答案的评论中正确观察到的那样，这是一个 3rd 方 API。因此，更改服务器上的 header 是不可能的。为了解决这个问题，一种可能的解决方案是将此请求移至您自己的后端(即将其隐藏在对您自己的服务器的请求后面)。由于同源策略不适用于服务器到服务器的请求，因此从服务器发出请求时不需要设置 Access-Control-Allow-Origin header 。由于您的网站将向同源的后端发出请求，因此也不需要在此处设置 Access-Control-Allow-Origin header 。

修复

就像其他人提到的那样，这是服务器端问题。要解决此问题，请在服务器的给定路由的响应对象中设置 Access-Control-Allow-Origin header 。

如果您的服务器是使用 Express 创建的，您可以通过将 res.header('Access-Control-Allow-Origin', '*') 添加到路由来完成此操作。 * 此处允许来自任何 URL 的请求。为了提高安全性，您可以将 * 替换为您从 API 获取数据的网站的 URL。

这是什么？

这是浏览器使用的一项安全功能，可最大程度地减少跨站点脚本编写的可能性。有关详细信息，请阅读 this和 this .