django - reactjs not able to perform put with axios

Question

I am not able to perform put request in reactjs, redux and python django.

I have also gone through the one of the answer for the same in stackoverflow but no luck

Below is the action code when user click on button.

  export const updateAppTypeData = (appData) => async dispatch => {
  const token = localStorage.getItem('token')
  var config = {

   };
  const response = await axios({
    method : 'put',
    url: ('http://localhost:8000/api/posts/appType/'+appData.id+'/'),
    data: appData,
    headers: {'Content-Type': 'application/json', 'Authorization': token}
  }).then(function (response) {
        console.log(response);
  });
  //dispatch({ type : FETCH_APP_TYPE , payload: response.data });
};

Below is the Server side code for url

urlpatterns = [
    url(r'^$',ApkStatusView.as_view()),
    url(r'^(?P<id>d+)/$',ApkStatusAPIDetailView.as_view()),
    url(r'^appType/$',AppTypeStatusView.as_view()),
    url(r'^appType/(?P<id>d+)/$',AppTypeStatusAPIDetailView.as_view()),
]

Server side code for view

class AppTypeStatusAPIDetailView(
    mixins.UpdateModelMixin,
    mixins.DestroyModelMixin,
    generics.RetrieveAPIView):

    lookup_field            =   'id'
    permission_classes      =   [permissions.IsAuthenticatedOrReadOnly]
    serializer_class        =   AppTypeSeriializer
    queryset                =   Apptype.objects.all()


    def put(self,request, *args, **kwargs):
        return self.update(request, *args, **kwargs)
    def patch(self,request, *args, **kwargs):
        return self.update(request, *args, **kwargs)
    def delete(self,request, *args, **kwargs):
        return self.destroy(request, *args, **kwargs)

I am getting the below issue.

PUT http://localhost:8000/api/posts/appType/1/ 403 (Forbidden)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:51
wrap @ bind.js:9
_callee3$ @ index.js:18
tryCatch @ runtime.js:62
invoke @ runtime.js:296
prototype.(anonymous function) @ runtime.js:114
step @ App.js:14
(anonymous) @ App.js:14
(anonymous) @ App.js:14
(anonymous) @ index.js:18
(anonymous) @ index.js:8
(anonymous) @ redux.js:449
ApkType._this.updateAppType @ apktype.js:60
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:480
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4477
batchedUpdates$1 @ react-dom.development.js:16660
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4556
interactiveUpdates$1 @ react-dom.development.js:16715
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
createError.js:16 Uncaught (in promise) Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Thanks for the help.

Answer 1

you are not sending the token, so you get back 403 403 Forbidden. add the token in the way your server expects it