Question

我有一个django rest api，它实现了如下所述的视图集。

class SubjectViewSet(viewsets.ModelViewSet):
    pagination_class = ContentRangeHeaderPagination
    queryset = Subject.objects.all()
    serializer_class = SubjectSerializer

类似地，我的前端基于react-admin here

import React from 'react';
import { Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';
import { NonIndividualList, NonIndividualCreate, NonIndividualEdit} from './subjects';

const App = () => (<Admin dataProvider=simpleRestProvider('http://localhost:8000/api/v1/coreapp')}>

<Resource name="subject" title="Non-Individuals" list={NonIndividualList} 
create={NonIndividualCreate} edit={NonIndividualEdit}/>
</Admin>);
export default App;

在我的休息服务器中，在settings.py下，我具有以下设置

APPEND_SLASH = False

最后，我的app / urls.py看起来像这样

router = DefaultRouter()
router.register(r'api/v1/coreapp/subject', views.SubjectViewSet)

urlpatterns = [(r'^', include(router.urls)),]

问题：

从邮递员那里，我可以轻松地终结端点

获取：http://localhost:8000/api/v1/coreapp/subject/，
POST：http://localhost:8000/api/v1/coreapp/subject/，
输入：http://localhost:8000/api/v1/coreapp/subject/2/，
删除：http://localhost:8000/api/v1/coreapp/subject/1/，

但是，我的react-admin客户端未添加斜杠

相反，Http-Actions Create / Put将请求发送到url。注意到缺少的尾部反斜杠了吗？

http://localhost:8000/api/v1/coreapp/subject

我试图

1-设置Append_Slash = True 2-在资源名称中添加了/，只需在其后添加两个反斜杠

<Resource name="subject/"/>

http://localhost:8000/api/v1/coreapp/subject//2

对于PUT，请注意其他反斜杠。

最重要的是，只要有反斜杠，我的服务器就会接受请求。

我的react-admin应用程序不对请求添加反斜杠。所以请给兄弟一个建议：-）

Answer 1

@ gildas-garcia

我遵循了您的回答，并在合理范围内再次出现了此问题。发送请求后，在附加查询参数之后

，在URL var的末尾添加/。

所需的URL（在？之前添加反斜杠）

http://localhost:8000/api/ps/nonindividual/?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22DESC%22%5D

当我按照您的答案回答时（在完整URL的末尾添加反斜杠）

http://localhost:8000/api/ps/nonindividual?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22DESC%22%5D/

继续前进，我选择查找？的indexOf。在网址中，并在该索引处添加反斜杠

const httpClient = (url, options = {}) => {

    var pos = url.indexOf('?');
    var b = "/";
    var _url = [url.slice(0, pos), b, url.slice(pos)].join('');

    //url = url + '/';
    return fetchUtils.fetchJson(_url, options);
}

const dataProvider = simpleRestProvider('http://localhost:8000/api/v1/coreapp', httpClient)


const App = () => (    
    <Admin dataProvider={dataProvider}
    <Resource name="subject" list={SubjectList} create={SubjectCreate} edit={SubjectEdit}/>
    </Admin>);

    export default App;

Answer 2

dataProvider的工作就是将请求转换为后端所需的形状并使用正确的url。

在这种情况下，您必须按照dataProvider documentation中的说明自定义httpClient：

import { fetchUtils, Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const httpClient = (url, options = {}) => {
    let finalUrl = `${url}/`;
    return fetchUtils.fetchJson(finalUrl, options);
}
const dataProvider = simpleRestProvider('http://localhost:3000', httpClient);

Answer 3

默认情况下，DefaultRouter创建的URL后面加上斜杠。实例化路由器时，可以通过将Trailing_slash参数设置为False来修改此行为。例如：

router = DefaultRouter(trailing_slash=False)

Answer 4

一种解决方案可能是使用为DRF编写的特殊dataProvider。 Here you can find it
此外，当您指定URL路由末尾的斜杠时：

urlpatterns = [ path('rolls/', SomeListView.as_view()),]

Django-rest-framework + React-Admin：URL反斜杠问题

4 个答案: