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