当 URL 中没有斜杠时，带有 VueJS 单页的 Django 路由会出现意外行为

Question

我有一个 Django 后端和 VueJS 前端组合，我通过 Django 提供 REST API 和一个带有 VueJS 和 vue-router 的单页应用程序。

来自this 的问题，我得到了在我的主要 urls.py 中使用以下 url 的提示：

urlpatterns = [
    re_path(r'^(?P<filename>(robots.txt)|(humans.txt))$', views.home_files, name='home-files'),
    path('api/', include('backend.urls', namespace='api')),
    path('auth/', include('auth.urls')),
    path('admin/', admin.site.urls),
    re_path(r'^.*$', views.vue), # VueJS frontend
]

所以我希望 URL 的行为如下：

{baseDomain}/api/users/1/ -> go to backend.urls  
{baseDomain}/auth/login/ -> go to auth.urls  
{baseDomain}/admin/ -> go to admin page  
{baseDomain}/de/home -> vue-router takes over

现在这些 URL 工作得很好，但是我希望 {baseDomain}/api/users/1（没有尾部斜杠）仍然会转到 backend.urls，但是发生的情况是我登陆了 Vue 页面。

在 settings.py 中添加 APPEND_SLASH = True 也无济于事，因为它只会在找不到要加载的页面时附加斜线。但由于我的前端的正则表达式匹配任何东西，它总是重定向到 Vue。

我的尝试是通过添加以下内容来修复它：

re_path(r'.*(?<!/)$', views.redirect_with_slash)

使用以下代码：

def redirect_with_slash(request):
    '''Redirects a requested url with a slash at the end'''
    if request.path == '/':
        return render(request, 'frontend/index.html')
    return redirect(request.path + '/')

但它不是一个非常优雅的。还要注意if request.path == '/':。奇怪的是，Django 会将“/”与正则表达式 r'.*(?<!/)$' 匹配，然后重定向到“//”，这是一个无效的 URL 并显示错误页面，所以我必须包含这个 if 语句。

有人对此有解决方案吗？在引用的问题中，这似乎不是问题，所以我想知道为什么它在我的项目中。

编辑：后端 urls.py

"""
backend urls.py
"""
from django.urls import include, path
from rest_framework_nested import routers
from auth.views import UserViewSet, GroupViewSet, ProjectViewSet
from .views import IfcViewSet, IfcFileViewSet

app_name = 'api'

router = routers.DefaultRouter() #pylint: disable=C0103
router.register(r'users', UserViewSet)
router.register(r'groups', GroupViewSet)
router.register(r'projects', ProjectViewSet)
projects_router = routers.NestedSimpleRouter(router, r'projects', lookup='project')
projects_router.register(r'models', IfcFileViewSet, base_name='projects-models')

urlpatterns = [
    path('', include(router.urls)),
    path('', include(projects_router.urls))
]

---

"""
auth urls.py
"""
from django.urls import path, include
from rest_framework import routers
from rest_framework_jwt.views import obtain_jwt_token, refresh_jwt_token
from .views import RegistrationViewSet

app_name = 'authentication'
router = routers.DefaultRouter()
router.register('register', RegistrationViewSet)

urlpatterns = [
    path('', include(router.urls)),
    path('', include('rest_auth.urls')),
    path('refresh_token/', refresh_jwt_token),
]

Answer 1

问题是您在re_path(r'^.*$', views.vue) 中有一个包罗万象，因此如果任何URL 与早先的paths 不完全匹配，这将被触发。

Django 的 CommonMiddleware 实际上会附加一个尾部斜杠并重定向，当它找到一个 404 并且 URL 路径不以 / 结尾（取决于 APPEND_SLASH 设置），但这是响应。

在您的情况下，如果请求路径未以 / 结尾，您可以拥有一个附加斜杠的小型请求中间件，例如：

from django.shortcuts import redirect

class AppendTrailingSlashOnRequestMiddleware:

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):

        if not request.path.endswith('/'):
            query_string = request.META['QUERY_STRING']
            query_string = f'?{query_string}' if query_string else ''
            to_url = f'{request.path}/{query_string}'
            return redirect(to_url, permanent=True)

        response = self.get_response(request)

        return response

显然，将中间件添加到settings.MIDDLEWARE，最好将其放在顶部，以防止来自其他中间件的不必要处理，因为无论如何我们都会重定向，然后也需要处理。

---

但这有一个问题；进行重定向时，来自 POST/PUT/PATCH 的数据将丢失（这里我们正在执行 301，但同样适用于 302。Temporary Redirect 307 在这方面可以为我们提供帮助，而且好消息都是常规的 包括 IE 在内的浏览器都支持这个。但是 Django 没有开箱即用的功能。所以我们需要自己实现：

from django.http.response import HttpResponseRedirectBase

class HttpTemporaryResponseRedirect(HttpResponseRedirectBase):
    status_code = 307

现在，在中间件中导入它，并使用它来代替 redirect：

class AppendTrailingSlashOnRequestMiddleware:

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):

        if not request.path.endswith('/'):
            query_string = request.META['QUERY_STRING']
            query_string = f'?{query_string}' if query_string else ''
            to_url = f'{request.path}/{query_string}'
            return HttpTemporaryResponseRedirect(to_url)  # here

        response = self.get_response(request)

        return response

---

注意：如果您想为 GET 保留浏览器缓存设施，您可以根据 request.method 重定向到 301/307。