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

另一种可能的解决方案是通过您的php文件获取api请求，然后将数据提供给js。

Answer 2

更新：

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

修复

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

如果服务器是使用Express创建的，则可以通过在路由中添加res.header('Access-Control-Allow-Origin', '*')来实现。 *在这里允许来自任何URL的请求。为了提高安全性，您可以将*替换为您要从API提取网站的网址。

那是什么？

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

由于起源跨域读取阻止（CORB），JSON API无法通过获取进行检索

2 个答案:

更新：

修复

那是什么？