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
1 comment
10 |2000

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 ·

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

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