ReactJs与Django项目静态资源请求路径异常原因咨询

这个问题的核心是浏览器对相对路径的解析规则，以及你的页面URL存在两种不同格式（带结尾斜杠/不带）导致的：

为什么会出现两种请求路径？ #

• 当页面URL是 localhost/index（不带结尾斜杠）时，浏览器会把 index 识别为当前页面的文件名，而非目录。这时相对路径 asset/script.js 会从域名根目录开始拼接，变成 localhost/asset/script.js。
• 当页面URL是 localhost/index/（带结尾斜杠）时，浏览器会把 index/ 识别为一个目录，相对路径会基于这个目录拼接，所以变成 localhost/index/asset/script.js。

至于页面URL会出现两种格式的常见原因：

• Django路由配置中可能同时存在带斜杠和不带斜杠的路由，或者APPEND_SLASH设置异常导致自动重定向不生效。
• 页面跳转（比如React路由跳转、模板内的链接）生成的URL有时带斜杠，有时不带。
• 用户手动输入URL时，可能会省略结尾斜杠。

解决办法 #

1. 使用绝对路径引用静态文件 #

直接给src加上根路径斜杠，把 asset/script.js 改成 /asset/script.js。这样不管当前页面URL是什么，浏览器都会从域名根目录开始查找静态文件，路径永远是localhost/asset/script.js。

2. 用Django静态文件标签生成正确路径 #

在Django模板中，不要硬写路径，而是使用Django提供的static模板标签：

<script src="{% static 'asset/script.js' %}"></script>

前提是你已经在settings里正确配置了STATIC_URL和STATIC_ROOT，这样Django会自动生成基于根路径的正确URL，避免路径解析错误。

3. 统一页面URL格式 #

在Django的urls.py中，确保路由是带结尾斜杠的：

path('index/', views.index_view, name='index')

然后在settings.py中确认APPEND_SLASH = True（默认即为True），这样当用户访问localhost/index时，Django会自动重定向到localhost/index/，统一页面URL的格式，避免两种解析情况。

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