reactjs 无法使用 axios 执行 put答案

【问题标题】：reactjs not able to perform put with axiosreactjs 无法使用 axios 执行 put
【发布时间】：2019-01-28 21:47:51
【问题描述】：

我无法在 reactjs、redux 和 python django 中执行 put 请求。

我在 stackoverflow 中也经历过answer 之一，但没有运气

以下是用户点击按钮时的动作代码。

  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 });
};

下面是 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()),
]

用于视图的服务器端代码

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)

我遇到了以下问题。

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)

感谢您的帮助。

【问题讨论】：

标签： django python-3.x reactjs react-redux

【解决方案1】：

你没有发送token，所以你会收到403 403 Forbidden。以服务器期望的方式添加令牌

【讨论】：

感谢@UXDart，但添加后我也得到了相同的结果。我已经更新了问题。
错误仍然是 403，因此您的服务器没有读取令牌，请检查您的服务器以查看令牌是否到达那里，以及为什么返回 403...您的服务器没有读取令牌，或者正在读取它，并且无论如何返回 403 ......这是一个身份验证错误
检查这里django-rest-framework.org/api-guide/authentication你需要使用“WWW-Authenticate”标头
或“授权：令牌 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b”
试试headers: {'Content-Type': 'application/json', 'Authorization': 'Token '+token}