Django+React分离部署后，外部请求Spotify API端点返回404

我开发了一个React+Django应用，拆分前后端后后端作为REST API服务，前端通过请求获取数据。单应用模式下所有API请求正常（如日志[25/Oct/2022 14:31:21] ←[m"GET /spotify/current-song HTTP/1.1" 200 236←[0m），分离后已配置CORS允许前端请求，多数接口正常，但/spotify/current-song端点外部请求返回404（日志[25/Oct/2022 14:31:41] ←[33m"GET /spotify/current-song HTTP/1.1" 404 2←[0m Not Found: /spotify/current-song），同端点内部请求正常。

相关代码：
React端API调用：

const getCurrentSong = async () => {
const song = await fetch(`${BASEURL}spotify/current-song`);
if (!song.ok || song.status == 204) {
    return defaultSong;
}
const songJson = await song.json();
setSong(songJson);
document.body.style.backgroundImage = `url('${songJson.image_url}')`;
};

useEffect(() => {
    const interval = setInterval(() => {
        getCurrentSong();
    }, 1000);
    setAppBackground();
    getRoomDetails();

    return () => clearInterval(interval);
}, []);

Django项目urls.py：

urlpatterns = [
    # 其他无关路由
    path('spotify/', include('spotify.urls')),
]

Django spotify应用urls.py：

urlpatterns = [
    path("current-song", CurrentSong.as_view()),
    # 其他无关路由
]

问题原因 #

核心问题出在Django路由的末尾斜杠匹配规则以及前后端路径的一致性上：

1. Django默认通过CommonMiddleware提供APPEND_SLASH自动重定向机制（默认开启），当请求不带末尾斜杠的URL时，会自动跳转至带斜杠的版本。但如果后端部署时移除了该中间件，或前端请求未跟随重定向，就会触发404。
2. 你的路由配置中，spotify应用下的current-song路径未添加末尾斜杠，内部请求可能通过Django模板标签等方式生成了带斜杠的标准URL，因此能正常匹配；而前端直接请求不带斜杠的路径时，若缺少重定向支持，就会出现路由匹配失败。

解决方案 #

有两种可行的修复方式：

方式一：统一路由和请求的末尾斜杠

• 修改spotify应用的urls.py，给current-song路径添加末尾斜杠：

  urlpatterns = [
      path("current-song/", CurrentSong.as_view()),
      # 其他路由保持不变
  ]
  

• 同步修改React端的请求路径，添加末尾斜杠：

  const song = await fetch(`${BASEURL}spotify/current-song/`);
  

方式二：确保重定向机制正常工作

检查Django项目的settings.py，确认MIDDLEWARE列表中包含django.middleware.common.CommonMiddleware：

MIDDLEWARE = [
    # ...其他中间件
    'django.middleware.common.CommonMiddleware',
    # ...其他中间件
]

该中间件会自动处理不带末尾斜杠的请求，无需修改路由和前端代码。

额外检查 #

确认BASEURL配置正确，确保末尾带有斜杠（如http://your-backend-domain/），避免拼接出http://your-backend-domainspotify/current-song这类错误路径。

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