Python Django OAuth toolkit postman works fine but unsupported_grant_type using expo with axios

Question

So this is a little strange of a problem. I'm using Python Django 4.2.5 as my back-end while my front-end is React Native with Expo and Axios 1.6 for all HTTP requests. For authentication, I'm using django-oauth-toolkit version 2.3.0. Now the problem is that Postman does fine with the /o/token/ request to fetch an OAuth2 token, however I keep getting the unsupported_grant_type error with Axios. Here is my configurations on Postman (disclaimer: I know this password looks somewhat realistic. I do not use this for anything else. I'm only using a somewhat complex one in a dev environment because Django Admin is smart about minimum password complexity):

What the response to this Postman request is, is this:

I try the same thing in Axios:

axios
      .post(DEV_DOMAIN, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': '*/*',
          'Accept-Encoding': 'gzip, deflate, br'
        },
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET
        grant_type: 'password',
        username: username,
        password: password
      })

, but I get this: (I redacted the host, client ID and client secret, I quadruple-checked and they're the same as in Postman)

{"message":"Request failed with status code 400","name":"AxiosError","stack":"AxiosError: Request failed with status code 400\n    at settle (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:147573:37)\n 
   at onloadend (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:147469:29)\n    at call (native)\n    at dispatchEvent (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:31756:31)\n    at setReadyState (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:30386:29)\n  
  at __didCompleteResponse (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:30188:29)\n    at apply (native)\n    at anonymous (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:30313:52)\n    at apply (native)\n    at emit (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:2305:40)\n    at apply (native)\n    at __callFunction (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:2840:36)\n    at anonymous (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:2600:31)\n    at __guard (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:2790:15)\n    at callFunctionReturnFlushedQueue (http://192.168.1.222:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:2599:21)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":["xhr","http"],"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json"},"method":"post","url":"http://redacted:8000/o/token/","data":"{\"headers\":{\"Content-Type\":\"application/x-www-form-urlencoded\",\"Accept\":\"*/*\",\"Accept-Encoding\":\"gzip, deflate, br\"},\"client_id\":\"redcated\",\"client_secret\":\"redacted\",\"grant_type\":\"password\",\"username\":\"[email protected]\",\"password\":\"Edmundfitzgerald123\"}"},"code":"ERR_BAD_REQUEST","status":400}
 LOG  err: {"error":"unsupported_grant_type"}

I did my best to duplicate the header as in Axios, but I came to no avail. What else should I do to fix this issue?

Answer 1

I incorrectly used Axios headers. The configurations, which includes the headers are supposed to be on the bottom like this:

    axios
      .post(DEV_DOMAIN, {
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET,
        grant_type: 'password',
        username: username,
        password: password,
      },
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })