在尝试使用 DRF 获取数据时，在 axios GET 响应中接收纯 Js 代码文件
Recieving plain Js code File in the axios GET Response in react while trying tp get data Using DRF
我在从我的 React 前端向 Drf 后端发出 Get 请求时遇到了这个问题，当我使用 Redux 进行调度时，应该会获取用户详细信息并将其设置为状态，但是来自后端的响应是纯的Js 代码文件或 index.html 我们假设在构建文件夹中的文件，而 运行 React With Django .
export const load_user = () => async dispatch => {
if (localStorage.getItem('access')) {
console.log('True')
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': `JWT ${localStorage.getItem('access')}`,
}
};
try {
const res = await axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config);
const user_type = res.data.type_of_user.toLowerCase()
const id = res.data.id
const res1 = await axios.get(`${process.env.REACT_APP_API_URL}/app/${user_type}/${id}`, config)
console.log(res1.data)
dispatch({
type: USER_LOADED_SUCCESS,
payload: res1.data
});
} catch (err) {
dispatch({
type: USER_LOADED_FAIL
});
}
}
else {
dispatch({
type: USER_LOADED_FAIL
});
}
};
这是 Django 的 URLs.py 模板视图设置，用于加载构建文件的 index.html
from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView
from app.views import index
urlpatterns=[
path('admin/', admin.site.urls),
path('auth/', include('djoser.urls')),
path('auth/', include('djoser.urls.jwt')),
path('app/', include('app.urls')),
path("", index )
]
urlpatterns+=[re_path("", TemplateView.as_view(template_name='index.html'))]
这是应用的 urls.py
from django.urls import path
from .views import PatientView, DoctorView, VitalView, UserView, send_mail_to_doctor, VitalsDataView,user_list
from django.views.decorators.csrf import csrf_exempt
urlpatterns=[
path('patient/<int:id>/',PatientView.as_view(), name="patient"),
path('doctor/<int:did>/',DoctorView.as_view(), name="doctor"),
path('vital/<int:pid>/',VitalView.as_view(), name="vital"),
path('vitals/<int:pid>/',VitalsDataView.as_view(), name="vitalData"),
path('users/',UserView.as_view(), name="UserData"),
path('send_mail_to_doctor/', csrf_exempt(send_mail_to_doctor), name="send_mail_to_doctor"),
# URL form "/api/users/1"
path('api/users/<int:pk>', user_list, name='user-detail'), # GET request for user with id
path('api/users/', user_list, name='user-list')
]
我发出请求时得到的代码文件，
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>React App</title><link href="/static/css/main.3ab95596.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script><script>!function(e){function r(r){for(var n,f,l=r[0],i=r[1],a=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,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(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.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 l=this.webpackJsonpfrontend=this.webpackJsonpfrontend||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=i;t()}([])</script><script src="/static/js/2.fbf2c2fe.chunk.js"></script><script src="/static/js/main.d3c07340.chunk.js"></script></body></html>
我应该得到用户详细信息而不是上面的代码
非常感谢任何帮助！谢谢
好吧，谢谢你们，因为它仍然没有答案，我深入挖掘并得到了我自己的答案，
我之前做的事情是我正在使用 TemplateView 渲染 index.html 反应代码文件，它以某种方式与 serializers.py 冲突，我得到了那个代码文件作为响应，现在我已经改变了结构React Frontend 的作者，我正在使用 Django 应用程序将 React 的 index.html 及其 index.js 作为 django 中的静态文件夹提供服务。我强烈推荐观看 Traversy Media 的 Full Stack React Youtube 视频以准备好相同的结构 > 再次感谢 :)
我在从我的 React 前端向 Drf 后端发出 Get 请求时遇到了这个问题，当我使用 Redux 进行调度时，应该会获取用户详细信息并将其设置为状态，但是来自后端的响应是纯的Js 代码文件或 index.html 我们假设在构建文件夹中的文件，而 运行 React With Django .
export const load_user = () => async dispatch => {
if (localStorage.getItem('access')) {
console.log('True')
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': `JWT ${localStorage.getItem('access')}`,
}
};
try {
const res = await axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config);
const user_type = res.data.type_of_user.toLowerCase()
const id = res.data.id
const res1 = await axios.get(`${process.env.REACT_APP_API_URL}/app/${user_type}/${id}`, config)
console.log(res1.data)
dispatch({
type: USER_LOADED_SUCCESS,
payload: res1.data
});
} catch (err) {
dispatch({
type: USER_LOADED_FAIL
});
}
}
else {
dispatch({
type: USER_LOADED_FAIL
});
}
};
这是 Django 的 URLs.py 模板视图设置，用于加载构建文件的 index.html
from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView
from app.views import index
urlpatterns=[
path('admin/', admin.site.urls),
path('auth/', include('djoser.urls')),
path('auth/', include('djoser.urls.jwt')),
path('app/', include('app.urls')),
path("", index )
]
urlpatterns+=[re_path("", TemplateView.as_view(template_name='index.html'))]
这是应用的 urls.py
from django.urls import path
from .views import PatientView, DoctorView, VitalView, UserView, send_mail_to_doctor, VitalsDataView,user_list
from django.views.decorators.csrf import csrf_exempt
urlpatterns=[
path('patient/<int:id>/',PatientView.as_view(), name="patient"),
path('doctor/<int:did>/',DoctorView.as_view(), name="doctor"),
path('vital/<int:pid>/',VitalView.as_view(), name="vital"),
path('vitals/<int:pid>/',VitalsDataView.as_view(), name="vitalData"),
path('users/',UserView.as_view(), name="UserData"),
path('send_mail_to_doctor/', csrf_exempt(send_mail_to_doctor), name="send_mail_to_doctor"),
# URL form "/api/users/1"
path('api/users/<int:pk>', user_list, name='user-detail'), # GET request for user with id
path('api/users/', user_list, name='user-list')
]
我发出请求时得到的代码文件，
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>React App</title><link href="/static/css/main.3ab95596.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script><script>!function(e){function r(r){for(var n,f,l=r[0],i=r[1],a=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,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(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.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 l=this.webpackJsonpfrontend=this.webpackJsonpfrontend||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=i;t()}([])</script><script src="/static/js/2.fbf2c2fe.chunk.js"></script><script src="/static/js/main.d3c07340.chunk.js"></script></body></html>
我应该得到用户详细信息而不是上面的代码 非常感谢任何帮助！谢谢
好吧，谢谢你们，因为它仍然没有答案，我深入挖掘并得到了我自己的答案， 我之前做的事情是我正在使用 TemplateView 渲染 index.html 反应代码文件，它以某种方式与 serializers.py 冲突，我得到了那个代码文件作为响应，现在我已经改变了结构React Frontend 的作者，我正在使用 Django 应用程序将 React 的 index.html 及其 index.js 作为 django 中的静态文件夹提供服务。我强烈推荐观看 Traversy Media 的 Full Stack React Youtube 视频以准备好相同的结构 > 再次感谢 :)