URL

Django routing with VueJS single page has unexpected behaviour when there is no trailing slash in the URL

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

所以我希望 URLs 表现得像这样:

{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),
]

问题是你在 re_path(r'^.*$', views.vue) 中有一个包罗万象的东西,所以如果任何 URL 在较早的 path 中没有完全匹配,这将被触发。

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

N.B:如果要保留GET的浏览器缓存设施,可以根据request.method重定向到301/307.