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

Posted 2023-02-24

【中文标题】Django-rest-framework + React-Admin：URL 反斜杠问题

【英文标题】：Django-rest-framework + React-Admin : URL Backslash issue

【发布时间】：2019-02-03 17:59:22

【问题描述】：

我有一个 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)),]

问题：

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

获取：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，建议兄弟:-)

【问题讨论】：

请同时包含您的 react-admin 代码

你会如何解决这个问题？通过使用 DRF 处理不带斜杠的 URL 或借助 React Admin 添加斜杠？

@Harikrishnan 我已经添加了代码。请随时索取任何有助于您帮助我的其他信息。

【参考方案1】：

一种解决方案可能是使用为 DRF 编写的特殊 dataProvider。 Here you can find it

另外，您在指定 URL 路由时在末尾附加斜杠：

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

【参考方案2】：

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

router = DefaultRouter(trailing_slash=False)

【参考方案3】：

@吉尔达斯加西亚

我听从了您的回答，尽管它是有道理的，但问题又出现了。 发送请求时，在附加查询参数后，在 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;

??

【讨论】：

你正在改变 url，这总是一个坏主意。您应该改为声明一个新变量并将其传递给fetchJson 函数

但是，我不明白你现在有什么问题。你能提供更多细节吗？

@GildasGarcia 没问题，我能够解决我的错误。再次感谢

【参考方案4】：

这是您的 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);