title: Django + ReactJS. The Httponly cookie is not saved in the browser at React side. I also gave {withcredentials : true} at both side
body: <p>I use django rest_framework_simplejwt package to generate JWT tokens and set them in browsable cookie with Httponly flag. At the Django side it work perfectly but at react side it does not work perfectly.
  I read many answers related to this question like <a href="https://stackoverflow.com/questions/42188260/django-cookies-are-not-getting-saved-on-browser">this</a> and <a href="https://github.com/SimpleJWT/django-rest-framework-simplejwt/issues/71" rel="nofollow noreferrer">this</a> but they have not solved my problem yet.
  Please help me understand where I'm wrong.</p>
  <p><strong>DJANGO SIDE</strong></p>
  <p><strong>views.py</strong></p>
  <pre><code>from rest_framework_simplejwt.views import TokenObtainPairView
  from django.conf import settings
  
  from rest_framework import status
  from rest_framework_simplejwt.exceptions import TokenError,\
      InvalidToken
  from rest_framework.response import Response
  
  class MyTokenObtainPairView(TokenObtainPairView):
      
      def post(self, request, *args, **kwargs):
          serializer = self.get_serializer(data=request.data)
  
          try:
              serializer.is_valid(raise_exception=True)
          except TokenError as e:
              raise InvalidToken(e.args[0])
             
            # set access token in browser with Httponly cookie.
          res = Response(serializer.validated_data, status=status.HTTP_200_OK)
          access_token = serializer.validated_data['access']
          res.set_cookie(&quot;access_token&quot;, access_token, max_age=settings.SIMPLE_JWT.get('ACCESS_TOKEN_LIFETIME').total_seconds(),samesite='Lax',secure=False, httponly=True)
          
          return res
  </code></pre>
  <p><strong>authentication.py</strong></p>
  <pre><code>from rest_framework_simplejwt.authentication import JWTAuthentication    
  from django.conf import settings
  
  class CookieHandlerJWTAuthentication(JWTAuthentication):
      def authenticate(self, request):
          # If cookie contains access token, put it inside authorization header
          access_token = request.COOKIES.get('access_token')
          if(access_token):
              request.META['HTTP_AUTHORIZATION'] = '{header_type} {access_token}'.format(
                  header_type=settings.SIMPLE_JWT['AUTH_HEADER_TYPES'][0], access_token=access_token)
  
          return super().authenticate(request)
  </code></pre>
  <p><strong>urls.py</strong></p>
  <pre><code>from .views import MyTokenObtainPairView
  
  urlpatterns = [
      ......
      path('auth/', include('djoser.urls')),
      # path('auth/', include('djoser.urls.jwt')),
      
      path('auth/api/token/', MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
  ]
  </code></pre>
  <p><strong>settings.py</strong></p>
  <pre><code>CORS_ALLOW_CREDENTIALS = True
  CORS_ORIGIN_WHITELIST = (
      'http://localhost:3000',
      'http://127.0.0.1:8000'
  )
  </code></pre>
  <p><strong>Work perfectly(Token set in cookie with Httponly.):</strong>
  <a href="https://i.stack.imgur.com/1CAAW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1CAAW.png" alt="" /></a></p>
  <p><strong>REACTJS SIDE</strong></p>
  <p><strong>Login.js</strong></p>
  <pre><code>axios.defaults.withCredentials = true
  const Login = () =&gt; {
  
  const [ivalue, setValue] = useState({});
  const { state, dispatch } = useContext(Authcontext);
  .......
  
  const loginClick = (e) =&gt; {
      e.preventDefault();
      setLoader(true);
  
      axios.post('http://127.0.0.1:8000/auth/api/token/', {
          username: ivalue.username,
          password: ivalue.password,
      })
          .then((res) =&gt; {
              setValue({ password: &quot;&quot; });
  
              dispatch({
                  type: LOGIN_SUCCESS,
              });
  
              setLoader(false);
   
              history.push(&quot;/my_profile&quot;);
          })
          .catch((err) =&gt; {
              setLoader(false);
              setOpen({ act: true, msg: &quot;error&quot; });
  
              dispatch({
                  type: LOGIN_ERROR,
              });
              setError(err.response.data);
          });
  };
  .........
  };
  </code></pre>
  <p><strong>Myprofile.js</strong></p>
  <pre><code>axios.defaults.withCredentials = true
  
  const MyProfile = () =&gt; {
  
      const history = useHistory();
      const { state, dispatch } = useContext(Authcontext);
  
      useEffect(() =&gt; {
          const auth_check = () =&gt; {
                  axios.get('http://127.0.0.1:8000/auth/users/me/')
                      .then((res) =&gt; {
                          dispatch({
                              type: AFTER_LOGIN,
                              payload: res.data
                          });
                      })
                      .catch((err) =&gt; {
                          history.push('/login')
                      });
                      };
          auth_check();
      }, []);
  }
  .......
  </code></pre>
  <p><strong>JWT Response(cookie not set in browser).</strong>
  <a href="https://i.stack.imgur.com/iNZye.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iNZye.png" alt="" /></a></p>
  <p><strong>Unauthorized Error</strong>
  <a href="https://i.stack.imgur.com/n3b0b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3b0b.png" alt="" /></a></p>