Axios put请求在Django Rest框架下无法正常工作_Django_Reactjs_Django Rest Framework_Axios

Axios put请求在Django Rest框架下无法正常工作

django reactjs django-rest-framework

Axios put请求在Django Rest框架下无法正常工作,django,reactjs,django-rest-framework,axios,Django,Reactjs,Django Rest Framework,Axios,我必须从axios向DRF发出put请求。在DRF中，我使用的是基于APIView类的视图。在我发出put请求时收到403禁止错误之前。因为它没有在请求中发送csrftoken。我在谷歌上搜索了它，并仔细研究了堆栈溢出问题，不知何故，我解决了403禁止的问题通过上面的StackOverflow问题，我更改了几行代码，它们是在我的axios文件中 axios.defaults.xsrfHeaderName = "X-CSRFToken"; axios.defaults.xsrfCookieNa

我必须从axios向DRF发出put请求。在DRF中，我使用的是基于APIView类的视图。在我发出put请求时收到403禁止错误之前。因为它没有在请求中发送csrftoken。我在谷歌上搜索了它，并仔细研究了堆栈溢出问题，不知何故，我解决了403禁止的问题

通过上面的StackOverflow问题，我更改了几行代码，它们是

在我的axios文件中

axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.withCredentials = true;

在我的项目设置中。py文件

ALLOWED_HOSTS = ['*']

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

但是wiered部分在这里，当我从axios将任何数据传递到彻底的put请求时，它实际上将流传递到APIView类（这是我的假设），从那里我得到一个有线响应。我可以看到它发送react的index.html作为响应中的数据

My views.py代码

class TestView(APIView):
    def put(self, request):
        print('inside put method')
        print(request.data)
        return Response('Test data passing in return')

我的Axios代码

import axios from "axios";
axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.withCredentials = true;

return axios({
        method: "put",
        url: API_URL,
        data: alterRecord
    })
        .then(res => {
            console.log("inside then");
            console.log(res);
        })
        .catch(e => {
            console.log("Inside catch");
            console.log(e.message);
        });

在我的用于测试的APIView类中，我添加了print语句，它不会在命令行中打印这些行。当我在命令行中看到请求时，我看到OPTIONS方法也被调用，我不知道为什么

[09/Oct/2019 18:02:09] "OPTIONS /api/url/ HTTP/1.1" 200 0
[09/Oct/2019 18:02:09] "PUT /api/url/ HTTP/1.1" 200 2102

在axios响应数据中，我可以看到它像这样传递react的index.html数据

data: "<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>NoA</title><link href="/static/css/2.39680177.chunk.css" rel="stylesheet"><link href="/static/css/main.87078788.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.46fe2ccd.chunk.js"></script><script src="/static/js/main.c9f4f998.chunk.js"></script></body></html>"

data:“您需要启用JavaScript才能运行此应用程序。！function（l）{function e（e）{for（var r，t，n=e[0]，o=e[1]，u=e[2]，f=0，i=[]；f选项请求是一个[飞行前请求]（.您是否使用Django或其他服务器提供index.html
服务？您在哪些域/端口上运行哪些服务器？请显示您的URL配置。@Alasdair我正在使用@Alasdair在本地运行它，我认为仅axios存在一些问题。如果我从postman发出put请求，它会向我发送正确的数据。但是使用axios call onl你的axios代码中的API\u URL
是什么？它定义在哪里？你能检查一下它是你期望的URL吗？但是你的axios请求转到“/API”而不是“/API/URL/”。你确定它是你的测试视图的正确URL吗？选项请求是一个[飞行前请求]（.您是否使用Django或其他服务器提供index.html
服务？您在哪些域/端口上运行哪些服务器？请显示您的URL配置。@Alasdair我正在使用@Alasdair在本地运行它，我认为仅axios存在一些问题。如果我从postman发出put请求，它会向我发送正确的数据。但是使用axios call onl你的axios代码中的API\u URL
是什么？它是在哪里定义的？你能检查一下它是你期望的URL吗？但是你的axios请求转到了“/API”而不是“/API/URL/”。你确定它是你的测试视图的正确URL吗？