403 Forbidden request when making an axios call with React (Django backend)

Question

I am trying to authenticate my session on a web application using ReactJS. My backend is setup on Django. When logging in to the application, I do receive the cookies in the header, however I am unable to set the cookies. However, when I try to post the request 'withCredentials: true', it returns me the 403 error.

The login call (Where I receive the cookies in response header)

let url = `${BASE_URL}/login/`;
    console.log('params for validateOtp:', params);
    axios
      .post(url, params)
      .then((res) => {
        console.log('validate otp code res: ', res);
        resolve(res);
      })
      .catch((err) => {
        console.log('validate otp code err: ', err);
        reject(err);
      });

After seeing the console, it is visible under the 'Network' tab that I do receive cookies from this API.

This is the API where I make the authenticated call.

let url = `${BASE_URL}/updatemerchant/`;
    axios
      .post(url, params, {
        withCredentials: true
      }
      )
      .then((res) => {
        console.log('updateDukaanUserToCloud res : ', res);
        // resolve(res)
        if (res.status === 200) {
          resolve(res);
        } else {
          reject('updateDukaanUserToCloud something went wrong');
        }
      })
      .catch((err) => {
        if (err.response && err.response.status === 400) {
          reject('updateDukaanUserToCloud updating user info failed');
        } else {
          reject('updateDukaanUserToCloud something went wrong');
        }
      });

settings.py

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_NAME = "csrftoken"
CORS_ORIGIN_WHITELIST = ('http://localhost:3000', 'http://127.0.0.1:3000', 'localhost:3000', '127.0.0.1:3000')
CSRF_TRUSTED_ORIGINS = [
    'localhost:3000',
    '127.0.0.1:3000',
]

The error I receive with the 403 forbidden request.

Probably in Django You might have enabled authentication for all routes — KaranV
– KaranV, Commented Feb 18, 2021 at 8:54
@THEBIGKV are we supposed to disable that? Can you provide more clarity as to what am I supposed to do to resolve this? — M Hasan
– M Hasan, Commented Feb 18, 2021 at 9:04

Airis · Accepted Answer · 2021-02-18 09:42:51Z

1

CSRF Token, as of this point, should not be a problem, since you cannot get past the authentication problem. If Django "Session authentication" is correctly installed, whenever the correct credentials are passed from React, and "login" method is called in Django, it should automatically attach the session cookie and you don't need to do additional work in React.

Did you add the "django.contrib.sessions.middleware.SessionMiddleware" middleware?

P.S. You will need to attach CSRF Token if you want to use POST requests afterwards.

answered Feb 18, 2021 at 9:42

Airis

662 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M Hasan Over a year ago

Hey, yes correct credentials are passed from react. Furthermore, the middleware is also added. I have to ask. by the last line you mean, just enabling 'withCredentials: true', as you can see in the code above. I need you to also know that these same APIs are set up on my react-native project as well. That seems to work perfectly well (Same APIs, same users).

Airis Over a year ago

By the CSRF Token I meant adding a header "X-CSRFToken" in your axios call. Check docs.djangoproject.com/en/3.1/ref/csrf/#ajax to see the getCookie() example.

Collectives™ on Stack Overflow

403 Forbidden request when making an axios call with React (Django backend)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related