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

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 = 假

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

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

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

问题：

从邮递员那里，我可以轻松地完成端点

• GET: 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 应用程序不会在请求上附加反斜杠。请SO，建议兄弟:-)

标签： django-rest-frameworkreact-admin

Answer 1

@吉尔达斯-加西亚

我听从了你的回答，尽管它是有道理的，但问题又出现了。发送请求时，在附加查询参数后，在 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 ？在 URL 中并在该索引处添加反斜杠

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;