0

I want to call a web API to get data about schools within a given radius of a location. In the documentation for the API, it gives an example saying that I can call it with curl --location --request GET 'https://gs-api.greatschools.org/schools?city=alameda&state=ca&limit=50' --header 'x-api-key: myapikey’, where the --header 'x-api-key: myapikey' is the key code I have for the API. It works in the terminal, and I want to call it in a React application on my local host using

fetch(https://gs-api.greatschools.org/schools?city=alameda&state=ca&limit=50', {
    {
     method: 'GET',
     headers: {'x-api-key': 'XXXXX'} //XXXX is my api key
    }
}

but I get a

localhost/:1 Access to fetch at 'https://gs-api.greatschools.org/schools?city=alameda&state=ca&limit=50' from origin 'http://localhost:3000' 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.

How can I pass the --header 'x-api-key:myapikey' from the fetch request so that it returns the expected response? The documentation for the API I am using can be found at https://docs.google.com/document/d/1pSe1AeZXGL01m5uG3wwRr9k4pI2Qw52xzPi2NmNrhyI/edit#heading=h.mo9am8ecq574

AbduAdd
  • 11
  • 3
  • 1
    I'm pretty sure that the headers are passed, but your server doesn't allow requests from other domains though a browser – Konrad Aug 22 '22 at 17:22
  • https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe – James Aug 22 '22 at 17:36
  • Hello everyone, I managed to find a fix. I used CORS-anywhere as a proxy to access the API, you can find more details at https://stackoverflow.com/questions/29670703/how-to-use-cors-anywhere-to-reverse-proxy-and-add-cors-headers . – AbduAdd Aug 22 '22 at 19:13

0 Answers0