question

crisso avatar image
crisso asked Frank Faustino Deactivated edited

OAuth - Request for API Token Blocked by CORS policy

For the sandbox setup I have:

App Web Configuration
Site URL: http://localhost:8080/register
 CORS Domain (optional): http://localhost:8080/
 Default OAuth Response: CODE

Making the request:
fetch(' https://sandbox.dev.clover.com/oauth/token?client_id= MyAppId&client_secret= MyAppSecret&code= MerchantCode')

Response:
"400 (Bad Request)"
"Access to XMLHttpRequest at ' https://sandbox.dev.clover.com/oauth/token?client_id= MyAppId&client_secret= MyAppSecret&code= MerchantCode' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"
OAuthAPI Token
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

2 Answers

Frank Faustino avatar image
Frank Faustino Deactivated answered Frank Faustino Deactivated edited
@Crisso, that `/oauth/token` endpoint does not have CORS support, since the token it returns contains sensitive information.
To successfully request an API token, send the `/oauth/token` request from your backend server (instead of your frontend client) to the Clover server. When the Clover server responds to the request, retrieve the token from your backend server.
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

David Marginian avatar image
David Marginian Deactivated answered David Marginian Deactivated commented
Try removing the trailing / in your web configuration's CORS Domain.
7 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

crisso avatar image crisso commented ·
I've tried removing the trailing / in the web configuration CORS Domain and removing everything from this option as well (since it is optional). But I'm still getting the same errors.
0 Likes 0 ·
David Marginian avatar image David Marginian ♦♦ commented ·
I suspect the request works outside of a web browser (postman, etc.). Depending on what browser you are using there may be issues with CORS and localhost. You can do a web search for "CORS and localhost" to see the issues and to also see how to work-around them while you are testing with localhost.
0 Likes 0 ·
crisso avatar image crisso commented ·
I'm continuing to see this issue, even when not using localhost. Our dev is a public webserver and even still we're seeing the error:

"Access to fetch at ' https://sandbox.dev.clover.com/oauth/token?client_id= MyAppId&client_secret= MyAppSecret&code= MerchantCode' from origin 'https://dev-tools.ftservices.cloud' 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."
0 Likes 0 ·
Frank Faustino avatar image Frank Faustino ♦♦ crisso commented ·

Hi, @Crisso.

Just curious, where are you making the `fetch` call to `/oauth/token`? Is that on the backend server or frontend client? Can you provide a working minimum, reproducible example?

Also, I'm assuming you've successfully made a call to the `/oauth/authorize` endpoint to get the authorization code. Where are you making that API fetch call? On the backend server or frontend client?

0 Likes 0 ·
crisso avatar image crisso Frank Faustino ♦♦ commented ·

@Frank Faustino
I've been making both the calls to `/oauth/authorize` and the API fetch calls on the frontend, like so:

```
fetch(`https://sandbox.dev.clover.com/oauth/token?client_id=${appId}&client_secret=${appSecret}&code=${cloverCode}`)
.then(results => { return results.json(); })
.then(data => { console.log(data)
```

0 Likes 0 ·
David Marginian avatar image David Marginian ♦♦ commented ·
The URL where you are making the request must exactly match your web application's config in the Clover dashboard. Strike that. See my more recent post, CORS is disabled for the /oauth/token request.
0 Likes 0 ·
David Marginian avatar image David Marginian ♦♦ commented ·
Please see the OAUTH docs:
https://docs.clover.com/clover-platform/docs/using-oauth-20

"Since the API token request consists of sensitive information about your app, this request does not have CORS support. To successfully request an API token, send this request from your app server to the Clover server. When the Clover server responds to the request, retrieve the API token from your app server."

In short, you can't make that request directly from the web browser. You will need to have your server make the request for you.
0 Likes 0 ·

Welcome to the
Clover Developer Community