I am developing a Hostel Management system using React and Django. The React runs on localhost:3000 while the django-rest-api runs on localhost:8000.
Currently, upon login in localhost:8000/api/login, I display user data in JSON format on localhost:8000/api/user.
While upon login from frontend localhost:3000, The server displays that a user has logged in by returning status 200 and the last_login attribute on the sqlite3 database gets updated too. But as I redirect the user too localhost:3000/api/student-view, I get a 403 forbidden error.
I validate user in views.py
class UserLogin(APIView):
permission_classes = (permissions.AllowAny,)
authentication_classes = (SessionAuthentication,)
def post(self, request):
data = request.data
assert validate_username(data)
assert validate_password(data)
serializer = LoginSerializer(data=data) ## Validates user data
if serializer.is_valid(raise_exception=True):
user = serializer.check_user(data)
login(request, user)
return Response(serializer.data, status=status.HTTP_200_OK)
class UserView(APIView):
permission_classes = (permissions.IsAuthenticated,)
authentication_classes = (SessionAuthentication,)
def get(self, request):
serializer = StudentViewSerializer(request.user)
return Response({"user": serializer.data}, status=status.HTTP_200_OK)
I POST the data to the server from Login.js. Server logs that the user is valid here.
function submitLogin(e) {
e.preventDefault();
client.post(
"/api/login",
{
username: username,
password: password
}, {withCredentials: true}
).then(response => {
if (response.status === 200) {
navigate("/student-view", {replace: true});
}
return response;
}).catch(err => {
console.log("Error", err)
})
}
Finally StudentView.js should make a GET from localhost:3000/api/user, which gives a 403.
const client = axios.create({
baseURL: "http://127.0.0.1:8000"
});
function StudentView() {
const [posts, setPosts] = useState([]);
useEffect(() => {
client
.get("/api/user")
.then((result) => {
console.log(result.data);
setPosts(result.data);
})
.catch((error) => console.log(error));
}, []);
return (
<div>
{posts.map((data) => {
return (
<div key={data.id}>
<h4>{data.title}</h4>
<p>{data.body}</p>
</div>
);
})}
</div>
);
}
Also in my settings.py,
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1",
"http://0.0.0.0",
]