Django集成React i18next时JSON翻译文件返回text/html问题解决

问题根因 #

该问题和前端i18n配置本身无关，完全是服务端路由和静态资源托管规则错误导致：

• settings.py中STATICFILES_DIRS仅配置了build/static目录，build/locales下的翻译JSON文件未被纳入Django静态资源托管范围
• 根路由配置的通配兜底规则re_path(r'^.*', TemplateView.as_view(template_name='index.html'))会匹配所有未被前置规则命中的请求，直接返回React入口HTML文件，因此请求JSON文件时拿到的是HTML格式的index.html内容，触发i18next的JSON解析错误
• 仅修改i18n.js的backend配置无法解决问题，必须调整Django侧的静态资源和路由规则。

修复步骤 #

1. 配置静态资源目录 #

修改settings.py，补充静态资源配置：

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 原有静态资源基础配置
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

如果希望统一走static前缀访问所有静态资源，可以直接把locales目录加入STATICFILES_DIRS：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
    os.path.join(BASE_DIR, 'build/locales'),
]

这种方式下locales下的文件访问路径前缀为/static/locales/。

2. 调整路由匹配顺序 #

Django路由按从上到下的顺序匹配，必须把静态资源路由放在通配兜底路由之前，避免JSON请求被兜底规则拦截。
修改根urls.py：

from django.contrib import admin
from django.urls import re_path, path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static
import os

urlpatterns = [
    path('admin/', admin.site.urls),
    # 其他业务接口路由统一放在这里
]

# 开发环境添加静态资源路由映射
if settings.DEBUG:
    # 方案1：如果要保留/locales/的访问前缀，和前端原有loadPath配置匹配，添加这行
    urlpatterns += static('/locales/', document_root=os.path.join(settings.BASE_DIR, 'build/locales'))
    # 原有static资源路由
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

# 通配兜底路由必须放在所有路由的最末尾
urlpatterns += [
    re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]

生产环境不需要让Django处理静态资源请求，直接在前置Web服务器（Nginx/Apache）上配置/locales/、/static/路径的映射规则，直接指向对应目录的静态文件并返回正确MIME类型，未匹配的路径再转发给Django返回index.html即可。

3. 同步调整前端i18n配置（可选） #

如果你选择把locales纳入static目录统一托管，没有单独配置/locales/前缀的路由，需要修改i18n.js中的backend配置，匹配静态资源路径：

backend: {
  loadPath: '/static/locales/{{lng}}/{{ns}}.json',
}

如果用了上面路由配置里的方案1，单独映射了/locales/前缀，原有i18n配置不需要改动。

验证方法 #

重启Django服务后直接访问翻译文件地址，比如http://127.0.0.1:8000/locales/en/translation.json，满足以下条件即为配置生效：

• 响应状态码为200
• 响应头Content-Type为application/json
• 响应内容为对应翻译文件的JSON内容，不是HTML格式的index.html代码
  此时刷新前端页面，i18next即可正常加载翻译资源，不会再报解析错误。

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