The problem is Axios (api) sends Authorization info with the request header, then the browser needs to use a preflight request to check that request. But the preflight check failed, and the request headers passed to the backend would be missing the Authorization (Bearer + Token), which is causing the Authentication error.
And then, with no Authentication, there would be no user displayname, and the is_authenticated would be false. Without the username, Casbin won't let anonymous users use OPTIONS on /api/v1/users/me.
The browser shows the error message as below. But I guess is not the CORS policy that blocked the access, it is actually Casbin who blocked the access.
My Solution
I tried to add permission for anonymous users to use OPTIONS on /api/v1/users/me, and that worked. Finally, Axios can get user info from the backend.
rbac_policy.csv
p, *, /api/v1/openapi.json, GET
p, *, /docs, *
p, *, /api/v1/login/access-token, *
p, anonymous, /api/v1/users/me, OPTIONS # see this line
p, admin, *, *
g, a@b.com, admin,
But I'm not sure it's the right way to do so, because after logging in, I still had to use the anonymous user to get permission, it feels weird and insecure.
I'm wondering is there any better way to fix it, if anyone can help me to improve, thanks.
Code
backend
fastapi 0.68 main.py
rbac.py for AuthenticationMiddleware backend, and Casbin enforcer
endpoints/users.py - read_user_me
rbac_policy.csv
frontend
vue.sj 3 Compositional API + Quasar 2 + axios 0.21.1 + vuex 4.0.1 store/auth/actions.js
Description
The problem is Axios (api) sends Authorization info with the request header, then the browser needs to use a preflight request to check that request. But the preflight check failed, and the request headers passed to the backend would be missing the Authorization (Bearer + Token), which is causing the Authentication error.
And then, with no Authentication, there would be no user displayname, and the
is_authenticated
would befalse
. Without the username, Casbin won't let anonymous users use OPTIONS on/api/v1/users/me
.The browser shows the error message as below. But I guess is not the CORS policy that blocked the access, it is actually Casbin who blocked the access.
My Solution
I tried to add permission for anonymous users to use OPTIONS on
/api/v1/users/me
, and that worked. Finally, Axios can get user info from the backend.rbac_policy.csv
But I'm not sure it's the right way to do so, because after logging in, I still had to use the anonymous user to get permission, it feels weird and insecure.
I'm wondering is there any better way to fix it, if anyone can help me to improve, thanks.