-1

Done a lot of research on the topic of cross-origin-request-sharing and tried a lot of fixes and nothing seems to have worked for me. currently I've been avoiding the error by passing my API request through a proxy server by appending 'https://cors-anywhere.herokuapp.com/' in front of my URL but that seems like a less-than-ideal workaround more than an actual solution.

The error I get is:

Access to fetch at 'https://usgeocoder.com/api/get_info.php?address=498 Castro st&zipcode=94114&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
api.js:6 GET https://usgeocoder.com/api/get_info.php?address=498 Castro st%20st&zipcode=94114&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json net::ERR_FAILED

I know I cant change the Access-Control-Allow-Origin header from client-side but I want to either make my own proxy (which I know I could do by cloning the 'cors-anywhere' git repo and hosting it on heroku myself but that still seems sketchy) or get through cors in a more adherent way. Here is my whole api.js file that fetches the data for my main App.js react file:

const fetch = require("node-fetch");


export const getInfo = async (address, zip) => {
    const url = `https://usgeocoder.com/api/get_info.php?address=${address}&zipcode=${zip}&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json`;
    const response = await fetch(url);
    const json = await response.json();
    return json;
}

Please let me know if I can provide more info that would be helpful in answering my question.

p.s I know there are other questions similar to this but I have been trying for hours and days to put together a fix for this and none of them seemed to work for me.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
TitanJamison
  • 5
  • 1
  • 4
  • Try adding this line, "proxy": "https://usgeocoder.com" in your package.json file – thomasbabuj Jul 31 '20 at 04:23
  • That didn't work for me ): – TitanJamison Jul 31 '20 at 04:31
  • 1
    The actual and only solution is in fact to use a proxy of some kind — at least as long as you want to make the request from frontend JavaScript running in a browser. The alternative is otherwise to instead make the request from backend server-side code. – sideshowbarker Jul 31 '20 at 05:42
  • Thank you so much. finally fixed this. I needed to research more on what a front end and backend actually were and ended up using express to make my api requests from backend server-side code and send it to my react frontend – TitanJamison Aug 01 '20 at 05:45

1 Answers1

0

If this is an open API, try this:

export const getInfo = async (address, zip) => {
    const url = `https://usgeocoder.com/api/get_info.php?address=${address}&zipcode=${zip}&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json`;
    const options = {
        method: 'GET'
        mode: 'no-cors'
    };
    const response = await fetch(url, options);
    const json = await response.json();
    return json;
}
Wiktor Bednarz
  • 701
  • 3
  • 7