FastAPI google authlib doesn't work from html (works from swagger) #27
Description
Hi,
I'm not getting much help from google or stackoverflow so I hope you can help.
I have Google OAuth working with FastAPI and authlib, following your example and building off the official security tutorial. This is working via FastAPI's built-in swagger UI, and I can see that I'm only able to access my protected routes if I have logged in with my google user via the fastapi.security.OAuth2PasswordBearer form, which is good.
However, I can't replicate this via my "frontend", which is just some html served by fastapi with a button that triggers the typical Google OAuth form. That is, the button contains <a href="/login">Google</a>. This ultimately takes me to my /token endpoint and prints the {"access_token": <my_token>, "token_type": "bearer"}, which seems good.
In reality, once this token is correctly received, I need to redirect to one of my protected routes. In order to redirect, I can't simply use that <a>. Instead, I need to bind an XMLHttpRequest() to onclick that simulate's the href="/login" with a GET and, if that goes well, then redirects to my protected route. But unfortunately that XMLHttpRequest() results in https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=<client_id>&redirect_uri=http%3A%2F%2F127.0.0.1%3A8004%2Fapi%2Fauth%2Fgoogle&scope=openid+email+profile&state=<state>' (redirected from 'http://127.0.0.1:8004/api/auth/login/google') from origin 'http://127.0.0.1:8004' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.. I have tried a variety of different headers and referrerPolicy, as well as CORSMiddleware but so far I am unable to simulate the <a> with my XMLHttpRequest() .
To be honest, I'm not sure I'm approaching this the right way. Ultimately I'm just trying to get your example code to work not just via swagger but also via my html.