python - 当 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 与之前的 不完全匹配路径，这将被触发。

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。