I have a headless infrastructure of Vue JS (front end) and FastAPI (back end).
I try to create login system using Authlib by using this tutorial: Authlib Google Login Tutorial for FastAPI
I is succeeded if I try to sign in via the back end (API) URL, for example :
https://apilink/login
It will took me to the google sign in page.
However, since I use Vue JS as a front end, I need to able to login the user when visiting:
https://frontendlink/login
But, there is an error when I try to:
axios.get(https://apilink/login)
The error is:
login:1 Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth....' (redirected from 'https://apilink/login') from origin 'https://frontendlink' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Please help me how to implement the good practice of authlib using headless infrastructure like this. thank you