HTTP method’s error: 401 (Unauthorized) on React & Django(DRF)

Question

I completed manipulating authentication with token by referring this article, and then I’m trying to create a crud function such creating post, displaying posts, etc… . However, I have an error when I fetched the url which displays posts(IE, fetching url I defined as “index” method on views.py of app for auth manipulation), I have 401 error even though I can access by using url of the backend without any error even on terminal.

I found some config codes which are related to authentication and permission for manipulation of authentication with token on settings.py causes this error, since when I delete these codes, the crud function works. But obviously authentication function no longer works (index method on views.py retrieve only token, another informations are filled blank) by this solution.

//fetch method on frontend
try{
              const res = await fetch(`${base_url}/accounts/current_user/`,{
                method:'GET',
                headers:{
                  Authorization:`JWT ${localStorage.getItem('token')}`
                }
              })
              const data = await res.json();
        
              setUsername(data.username);

              console.log(data)
              
            }catch(err){console.log(err)};

//fetch posts on frontend
const getProblems = async() =>{
            const res = await fetch(base_url+'/problems/index');

            const data = await res.json();

            setProblems(data);
        }

//views.py on app for auth manipulation
@api_view(['GET'])
def get_current_user(request):
    serializer = GetFullUserSerializer(request.user)
    print(serializer.data)
    return Response(serializer.data)

//settings.py(related to auth, cors):

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    )
}

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

CORS_ALLOW_CREDENTIALS = True

JWT_AUTH = {
    'JWT_RESPONSE_PAYLOAD_HANDLER':
    'new_sns.utils.custom_jwt_response_handler',   
}

I have another files such serializer.py, urls.py,but they are absolutely same as the article I extracted.

I guess I misunderstand something around configuration. I would like to hear some of suggestions. Please let me know if you think if there may be problems on another files which I didn't attach on here.

Thanks.

mszan · Accepted Answer · 2021-04-15 09:57:26Z

2

Try changing JWT ${localStorage.getItem('token')} to Authorization:`Bearer ${localStorage.getItem('token')}.

In case this won't work, try djangorestframework-simplejwt - package recommended on DRF's docs.

JSON Web Token is a fairly new standard which can be used for token-based authentication. Unlike the built-in TokenAuthentication scheme, JWT Authentication doesn't need to use a database to validate a token. A package for JWT authentication is djangorestframework-simplejwt which provides some features as well as a pluggable token blacklist app.

django-api-logger and axios-jwt may also come handy.

answered Apr 15, 2021 at 9:57

mszan

5756 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

HTTP method’s error: 401 (Unauthorized) on React & Django(DRF)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related