REST API CORS Issue from React Web App

Question

question

nav asked May 21, '21 francofrati answered Dec 27, '22

REST API CORS Issue from React Web App

Hi there,

Facing the following CORS issue when trying to access REST API both from a Heroku hosted React web application, and from localhost:3000

(redacted = ...)

Access to fetch at 'https://sandbox.dev.clover.com/v3/merchants/.../categories?expand=items&access_token=...' from origin '....herokuapp.com' 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 have a Developer account + test Merchant set up, with the test dev application installed on the test merchant. When faced with the same CORS issue locally (while on localhost:3000), I have tried this configuration

Site URL: http://localhost:3000/menu,
CORS Domain: http://localhost:3000,
Default OAuth Response: Token: Testing Only

(and reinstalled the Application on the test Merchant each time) to no avail - the OAuth cycle works (I get redirected to the correct URL with an access_token=... in the url), but making an API request with that same access_token and merchantId leads to the same CORS issue. Here are two example API calls I am trying to make.

https://sandbox.dev.clover.com/v3/merchants/.../categories?expand=items&access_token=...

https://sandbox.dev.clover.com/v3/merchants/.../items/${itemId}?expand=modifierGroups.modifiers&access_token=...

To be clear: all of these calls are being made from our frontend, with either JavaScript Fetch or Ajax. And weirdly, when I visit these endpoints directly in my browser (Chrome & Edge) and tested in Postman, I do not get that same CORS issue. Only facing it when it's called from my React code.

As this did not work either, I used local-cors-proxy to proxy my request to localhost:8010 and changed my API fetch call to:

http://localhost:8010/proxy/v3/merchants/AN32EGH84E221/categories?expand=items&access_token=d1a7036a-5889-cac9-980f-90b1e1e02f

: which did in fact work; I receive the correct payload and am able to use it across my application locally.

---

I obviously cannot proxy my request in the same way when the web-app is hosted - the REST configuration I tried for our Heroku app is this

Site URL: ... .herokuapp.com/menu
CORS Domain: ... .herokuapp.com
Default OAuth Response: Token: Testing Only

Again, the OAuth seems to be functioning just fine, I am receiving the MerchantId, EmployeeId, ClientId and access_token in the URL when I hit Example OAuth Request, but making either of the API calls above leads to the same CORS issue. And again, visiting the endpoint myself either in my browser, or tested with Postman DOES show me the correct payload, it just does not work in React code.

---

I have extensively looked through the documentation and a lot of relevant forum posts, but am unable to figure this out. The documentation suggests the only API request with CORS disabled is the OAuth call to get access_token/code, but I am receiving those just fine from the URL. I think each access_token lasts for a year, so invalid tokens seem to be ruled out as well.

This forum post seems to suggest you cannot make these REST API calls from hosted/production webapps unless the actual Clover application is on the Marketplace (instead of from a developer account), but that leaves me with the same issue on localhost (I'd rather not proxy as I don't think I should be facing this issue in the first place).

I can add any missing / relevant info as requested -

Help is much appreciated, thank you for your time!

clover developer community REST API Inventory

10 |2000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Welcome to the
Clover Developer Community

Answer 1 · 2021-05-21T22:28:45Z

David Marginian Deactivated answered May 21, '21 David Marginian Deactivated edited May 24, '21

I would double check your cors configuration on your Clover app and verify it does indeed match the origin of the request from your react app.

21

10 |2000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

nav commented · May 21, 2021 at 10:39 PM

Hi David, thanks for the quick response.

I've double checked the CORS configuration, but did it again just in case along with a full uninstall/reinstall of the app from the Test Merchant. The configuration seems exactly right (for the Heroku app, second configuration posted above). I have also tried it once without the /menu in the Site URL - again to no avail.

0 ·

David Marginian ♦♦ nav commented · May 21, 2021 at 10:43 PM

You said the request works from the browser but not from your react app. That doesn't make a lot of sense to me, but it confirms the token is valid (so uninstalling the app isn't going to help).

0 ·

nav David Marginian ♦♦ commented · May 21, 2021 at 10:58 PM

Ah sure, I didn't realize the reinstall was only for token changes to propagate so I won't try that anymore.

And exactly, I was under the assumption that browser requests are identical to fetch requests I'm making from react, so getting the correct JSON data when I visit the endpoint url (and in Postman) but not in my React code does not make sense to me. The obvious next assumption is my code is incorrect, but I have stripped away all extra code and am dealing with the most basic request. Unsure how to proceed.

export async function getAPICategories() {
    const options = {
        method: "GET", 
        mode: "cors", 
        headers: { Accept: "application/json" },
    };

   const res = await fetch (
        "https://sandbox.dev.clover.com/v3/merchants/.../categories?expand=items&access_token=...",
        options
    )
    .then (response => response.json())
    .catch (err => console.error(err))

    return res;
}

0 ·

Show more comments

Answer 2 · 2022-12-27T16:20:41Z

francofrati answered Dec 27, '22

Hello, did you solve the problem???

10 |2000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

question