I'm trying to login from the react front end via a Fetch POST request to the Knox endpoint but I am unable to. I can login normally from http://localhost:8000/api/login/ so I assume something must be wrong with my fetch but I can't figure it out. On the Knox docs it says that the LoginView only accepts an empty body so I can't just put the login info in there either.

View (copy pasted from the docs and I added BasicAuthentication)

class LoginAPI(KnoxLoginView):
    permission_classes = (permissions.AllowAny,)
    authentication_classes = [BasicAuthentication]

    def post(self, request, format=None):
        serializer = AuthTokenSerializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data['user']
        login(request, user)
        return super(LoginAPI, self).post(request, format=None)

Fetch:

const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const credentials = btoa(`${data.get('username')}:${data.get('password')}`);

    const requestOptions = {
            method: "POST",
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
                "Authorization": `Basic ${credentials}`
            },
            body: JSON.stringify({})

        }
     fetch('http://127.0.0.1:8000/api/login/', requestOptions)
            .then(response => console.log(response))
            .catch(error => console.log(error))

Would appreciate any help as to what I'm doing wrong here