question

c716524 avatar image
c716524 asked c716524 commented

CORS issue when trying to authenticate with Clover WebApp

I am building a web app with Django / ReactJS / Redux and axios as HTTP client. When I make a normal HTTP link in my frontend to my login procedure with Django everything is working fine, i.e. the login window shows up and I can login to reach the user area of the website. It seems in this case CORS is not applied. However when I use axios to call the backend script via API I get a CORS error message within the browser.

1) When using the header "Access-Control-Allow-Origin": "*" in axios I get following message: 

Access to XMLHttpRequest at 'https://sandbox.dev.clover.com/oauth/authorize?client_id=EVXXXXXXXXXX' (redirected from 'http://127.0.0.1:8000/api/auth/login') from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

When analysing the request in developer tools of Chrome I see that the request method is "OPTIONS". I see some information in the response obviously specified by Clover but no Access-Control-Allow-Origin etc. headers (as explained in this thread: https://community.clover.com/questions/2461/clove...

2) Without the header "Access-Control-Allow-Origin": "*" in axios I get: 
Access to XMLHttpRequest at 'https://sandbox.dev.clover.com/oauth/authorize?client_id=EVXXXXXXXXXX' (redirected from 'http://127.0.0.1:8000/api/auth/login') from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
With this approach I get again a response without Access-Control headers in the browser (see attached screenshot). request-to-authorize.png

In my sandbox dashboard I used http://127.0.0.1:8000 in the CORS field. I tested also with different web pages like http://127.0.0.1:8000 instead of the authorization link of clover and there I get the Access-Control-Allow-Origin headers within the browser. Of course I also read the help pages within the Clover documentation on CORS.

So to me it does not seem the problem is caused by axios, but rather it shows that something with CORS in general is not alright. My goal is to at least narrow down the problem, since I am not sure if the problem is rather on Clover's side or within my setup.

Questions:
1) Does Clover support preflight requests, as happening in approach 1) ?
2) Why are there no Access-Control Headers in the response when accessing the authorization endpoint? I checked with different browsers, but no differences.
3) Does anybody else have a similar setup with AJAX type request to authorize that works? (Axios works like AJAX)
Auth
request-to-authorize.png (197.0 KiB)
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.

c716524 avatar image c716524 commented ·

There was a wrong link, the sentence should be:

I tested also with different web pages like https://randomuser.me/api/ instead of the authorization link of clover and there I get the Access-Control-Allow-Origin headers within the browser.

0 Likes 0 ·
chanel avatar image chanel commented ·

The Site URL and the CORS domain should have the same base URL (http://127.0.0.1:8000/ and http://127.0.0.1:8000/myapp ). Can you confirm if you still see this error once your have matching URLs?

0 Likes 0 ·
c716524 avatar image c716524 chanel commented ·

The URLs I used on the sandbox web configuration were as follows:
Site: http://127.0.0.1:8000/oauth_callback/
CORS: http://127.0.0.1:8000
Since I had to move on, I found another solution that works for me: Instead of having the axios call to the server side, which then connects to Clover-OAuth, I am using a direct link from client side to Clover OAuth and have found a different way of handling the whole stuff server side. My conclusion was that OAuth may not be suitable for Ajax like calls.

0 Likes 0 ·
Frank Faustino avatar image Frank Faustino ♦♦ commented ·
Just to clarify, are you making the call to https://sandbox.dev.clover.com/oauth/token from your Django app or React app?

That particular request does not have CORS support and should be made from a server that's configured with CORS (use django-cors-headers) or a proxy server on the same domain as your client-side app.
0 Likes 0 ·
c716524 avatar image c716524 Frank Faustino ♦♦ commented ·

Within React I used axios to call the server side script, which then redirected to your sandbox using .../oauth/authorize?client_id=XXXX. After receiving the code Django called /oauth/token?client_id=%s&client_secret=%s&code=%s . Not sure what your URL is used for?

I will test your recommendation next time.

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

Hello, @c716524.

Were you able to resolve this issue?

0 Likes 0 ·
Show more comments

1 Answer

Jonathan Ryan Grice avatar image
Jonathan Ryan Grice answered
I created a short tutorial for JAVA and PHP with the authorization flow for the Clover WebAPI.
It's short, sweet, and to the point. You can reference it at https://www.jonathanryangrice.com/blog/tutorials/clover-deve...
No credit required to use verbatim code since it's available online. Cheers.
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.

Welcome to the
Clover Developer Community