CORS policy error when trying to fetch API - No 'Access-Control-Allow-Origin' header

When fetching, I’m getting this error in console: Access to fetch at ‘https://usgeocoder.com/api/get_info.php?address=18035%20SE%20Newport%20way&zipcode=98027&authkey=’ from origin ‘https://block--hd-i-z-fh-ux-g-vq-m0-t--tiq297d.airtableblocks.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Here’s the current fetch part of my code:

let reqHeader = new Headers();

reqHeader.append('Content-Type', 'text/json','Access-Control-Allow-Origin'); //,'no-cors'

let initObject = {

    method: 'GET', headers: reqHeader,

};

var targetUrl = "https://usgeocoder.com/api/get_info.php?address="+add+"&zipcode="+zip+'&authkey='+apiKey;

console.log(targetUrl);

await fetch(targetUrl, initObject)

    .then(function (response) {

    return response.json();

    })

    .then(function (data) {

        console.log("Response Data:"+data);

    })

    .catch(function (err) {

        console.log("Something went wrong!", err);

    });

It’s printing out " 1. “Something went wrong!”

  1. :arrow_forward:Error {name: “TypeError”}" to console but I’m assuming that’s because it’s failing to fetch.

I’ve dug through other people having similar issues but passing ‘no-cors’ doesn’t work. The output is originally in XML if I’m using this API URL in a browser so that could be the issue.

I’ve tried to fetch this API probably 5-6 different ways to see if parsing the XML differently would fix it but keep getting either a blank object or this error.

Here’s what it should be returning:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 18035 SE Newport way, 98027SuccessBoth street address and zip code were found12.0420 Match Found47.5647053277424-122.100619433986 Match Found18035 SE NEWPORT WAYIssaquahKingWA98027 Match Found98027-9064 Match FoundKingMatch FoundBellevueBellevue city
1 Like

This was resolved using https://cors-anywhere.herokuapp.com/ in the fetch.

Ex:
https://cors-anywhere.herokuapp.com/https://usgeocoder.com/api/get_info.php?.…”

1 Like

I fixed it by installing cors in my app.

2 Likes

Did you do this in your browser console?

No, I installed it to where my REST API is. This is assuming you have full control of the app where your APIs are.

We definitely do not.