如何在i18next-http-backend插件中设置动态自定义请求头？

我在React应用中配置i18next时，遇到了需要给请求头设置动态值（比如accept-lang）的需求。根据文档，customHeaders应该能实现这个功能，但这个函数没有传入任何上下文参数，导致我无法获取当前语言。

我的配置代码如下：

const initOptions: I18nInitOptions = {
            debug: true,
            fallbackLng: 'en',
            supportedLngs: ['en'],
            interpolation: {
                escapeValue: false,
            },
            detection: {
                order: ['localStorage'],
            },
            backend: {
                backends: backends,
                backendOptions: [
                    {
                        loadPath: backendUrl,
                        customHeaders: () => {
                            return {
                                'accept-lang': 'LANG VALUE HERE?',
                            };
                        },
                    },
                ],
            },
            initImmediate: false,
            saveMissing: true,
        };

我尝试打印customHeaders方法的参数，结果是undefined，没法在里面拿到当前语言来设置请求头。

解决方法 #

• 直接读取当前语言（适合初始化时已确定语言的场景）
  因为你的语言检测顺序是localStorage，可以直接从localStorage读取当前语言：

const currentLang = localStorage.getItem('i18nextLng') || 'en';

const initOptions: I18nInitOptions = {
    // ...其他配置
    backend: {
        backends: backends,
        backendOptions: [
            {
                loadPath: backendUrl,
                customHeaders: () => ({
                    'accept-lang': currentLang,
                }),
            },
        ],
    },
};

• 初始化后动态更新配置（适合语言动态切换的场景）
  在i18n初始化完成后，或者监听语言变化事件，实时更新customHeaders：

i18n.init(initOptions).then(() => {
    // 初始化完成后更新请求头配置
    i18n.services.backendConnector.backend.options.customHeaders = () => ({
        'accept-lang': i18n.language,
    });
});

// 监听语言切换，实时更新请求头
i18n.on('languageChanged', (lng) => {
    i18n.services.backendConnector.backend.options.customHeaders = () => ({
        'accept-lang': lng,
    });
});

• 自定义Backend类（更灵活的方案）
  继承原HttpBackend，重写read方法，在里面直接获取当前语言：

import HttpBackend from 'i18next-http-backend';

class CustomHttpBackend extends HttpBackend {
    read(language) {
        // 每次读取资源时设置动态请求头
        this.options.customHeaders = () => ({
            'accept-lang': language,
        });
        return super.read(...arguments);
    }
}

// 配置中使用自定义Backend
const initOptions: I18nInitOptions = {
    // ...其他配置
    backend: {
        backends: [CustomHttpBackend],
        backendOptions: [
            {
                loadPath: backendUrl,
            },
        ],
    },
};

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