question

crisso avatar image
crisso asked ·

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"
API TokenOAuth
10 |2000 characters needed characters left characters exceeded

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

Frank Faustino avatar image
Frank Faustino answered ·
@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.
Share
10 |2000 characters needed characters left characters exceeded

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 answered ·
Try removing the trailing / in your web configuration's CORS Domain.
7 comments Share
10 |2000 characters needed characters left characters exceeded

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

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 · ·
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 · ·
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 · ·

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 ♦♦ ·

@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 · ·
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 · ·
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