javascriptjsonfetch-apicross-origin-read-blocking

JSON API not retrieving through fetch due to origin Cross-Origin Read Blocking (CORB)


I continuously keep getting the (settings.js:76 Cross-Origin Read Blocking (CORB) blocked cross-origin response) error. I am using the fetch method to retrieve the JSON data from the API, here's my code:

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

Solution

  • UPDATE:

    As KevinB rightly observed in the comments to this answer, this is a 3rd party API. Hence, changing headers on the server is not possible. To get around this issue, one possible solution is to move this request to your own backend (i.e. hide it behind a request to your own server). Since the same-origin policy does not apply to server-to-server requests, the Access-Control-Allow-Origin header does not need to be set when making the request from your server. And since your website will be making the request to your backend, which is the same origin, the Access-Control-Allow-Origin header does not need to be set here either.

    The Fix

    Like others mentioned, this a server-side issue. To solve this, set the Access-Control-Allow-Origin header in your server's response object for the given route.

    If your server is created with Express, you may do this by adding res.header('Access-Control-Allow-Origin', '*') to the route. * here allows for requests from any URL. For more security, you can replace * with the URL of the website from which you are fetching from the API.

    What Is It Though?

    It is a security feature used by browsers to minimize the chance of cross-site scripting. For more information on it, read this and this.