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



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

从这个问题中,我得到了在我的主URL中使用以下URL的提示。py:

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

问题是re_path(r'^.*$', views.vue)中有一个catch-all,所以如果任何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。有一个临时重定向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。

最新更新