Angular应用刷新后返回Django 200响应问题咨询

• Angular是单页应用（SPA），默认使用HTML5 History模式实现前端路由：页面内跳转时Angular会直接在浏览器端截获路由事件、渲染对应组件，不会向服务端发起对应路径的页面请求。
• 当你在浏览器手动刷新页面、或者直接输入前端路由地址访问时，浏览器会直接向Django后端发起当前路径的GET请求。
• 现有配置存在两个核心问题：
  1. 后端API路由没有统一前缀，/images/、/images/<id>/这类路径同时被Angular前端路由和Django后端API路由占用，刷新时请求优先匹配到Django的API视图，返回的是接口响应内容（也就是你看到的200状态码响应），不是Angular应用的入口HTML文件。
  2. Django侧没有配置前端路由兜底规则，所有非API路径的请求没有被引导返回Angular的index.html入口文件，浏览器拿不到Angular启动所需的基础代码，自然无法完成前端渲染。

1. 调整Django路由配置，做前后端路由隔离 #

首先给所有后端API统一增加/api前缀，彻底和前端路由路径错开；最后增加通配兜底路由，所有非API、非静态资源的请求全部返回Angular打包后的index.html入口文件，注意兜底路由必须放在所有路由条目的最后，避免拦截正常的API和静态资源请求。
修正后的urls.py示例：

from django.urls import path, re_path
from django.views.generic import TemplateView
from quickstart import views

urlpatterns = [
    # 后端API统一加/api前缀，和前端路由完全隔离
    path('api/images/', views.ImageList.as_view()),
    path('api/images/<str:id>/', views.Image.as_view()),
    path('api/images/<str:id>/explanations', views.Explanation.as_view()),

    # 兜底路由：所有非api、非静态资源路径，全部返回Angular入口页
    re_path(r'^(?!api/|static/).*$', TemplateView.as_view(template_name='index.html'))
]

配置前需要先执行Angular打包命令ng build --prod，把生成的dist目录下的index.html放到Django的模板目录，其余js/css等静态资源放到Django的静态文件托管目录下，确保静态资源可正常访问。

2. 同步修改Angular侧的接口请求地址 #

所有原来调用后端接口的请求路径，统一增加/api前缀，比如原来请求图片列表的路径是/images/，修改为/api/images/，和后端路由对应。

可选替代方案（不推荐） #

如果不想修改服务端兜底配置，可以把Angular的路由模式改为Hash模式，路由地址会变成https://你的域名/#/images/123这种形式，#后的路径内容不会被浏览器发送到服务端，刷新时永远请求根路径的index.html，不会出现路由匹配到后端API的问题。但这种模式URL不够美观，对SEO也不友好，生产环境优先选择History模式加服务端兜底的方案。

生产环境优化建议 #

生产环境部署时不建议用Django直接托管Angular静态资源和兜底路由，建议用Nginx作为反向代理：

• 静态资源（js/css/图片等）直接由Nginx读取返回
• /api/开头的请求转发给Django处理
• 其余所有路径的请求直接由Nginx返回Angular的index.html，性能比Django处理高很多。

内容的提问来源于stack exchange，提问作者student123