CORS and ReactJS using Etsy APIs

user_4926655 0
Viewed 683

I'm a n00b trying to learn React. I'm building a website that uses Etsy's APIs. Registered an app there and everything. They have a page that talks about CORS and proxying here: https://www.etsy.com/developers/documentation/getting_started/jsonp

So for example, I'm trying to do a fetch on a store's listings:

fetch('https://openapi.etsy.com/v2/shops/[shopId]/listings/active?api_key=[apiKey]')

But that violates the browser's CORS policy. No problem, says the documentation on Etsy. You can always use their proxy: beta-api.etsy.com. So I add that to my package.json file:

"proxy": "https://beta-api.etsy.com/"

And then I change my fetch line:

fetch('/v2/shops/[shopId]/listings/active?api_key=[apiKey]')

But CORS is still being violated in the browser.

Access to fetch at 'https://www.etsy.com/shop/beta-api/v2/shops/[shopId]/listings/active?api_key=[apiKey]' (redirected from 'http://localhost:3000/v2/shops/[shopId]/listings/active?api_key=[apiKey]') 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.

I don't want an opaque response, either, so doing "no-cors" really doesn't help. Does anyone have any recommendations on how I can at least get a local website up and running?

reactjs
1 Answers

You are getting that error because your server has set Access-Control-Allow-Origin to restrict cross-domain traffic. You are sending your request from your localhost so that is considered cross-domain.

If you are able to change your server settings to set Access-Control-Allow-Origin: * then you can make those requests without a CORS error but I don't suggest doing this.

The best solution would probably be a proxy server. You can use cors-anywhere heroku app to easily do this.

Excerpt from Medium Article on this issue

The cors-anywhere server is a proxy that adds CORS headers to a request. A proxy acts as an intermediary between a client and server.

In this case, the cors-anywhere proxy server operates in between the frontend web app making the request, and the server that responds with data.

Similar to the Allow-control-allow-origin plugin, it adds the more open Access-Control-Allow-Origin: * header to the response.

Say your frontend is trying to make a GET request to: https://joke-api-strict-cors.appspot.com/jokes/random

But this api does not have a Access-Control-Allow-Origin value in place that permits the web application domain to access it.

So instead, send your GET request to: https://cors-anywhere.herokuapp.com/https://joke-api-strict-cors.appspot.com/jokes/random

The proxy server receives the https://joke-api-strict-cors.appspot.com/jokes/random

from the url above. Then it makes the request to get that server’s response. And finally, the proxy applies the Access-Control-Allow- Origin: * to that original response.

user_7916000
Related