无法让 react-i18next 通过 FETCH 后端读取 JSON 文件

Question

我正在尝试使用 i18next-fetch-backend 在客户端上使用 react-i18next，即使我可以通过浏览器访问 JSON 翻译文件，但还是有些问题在 init 例程中如何处理它们。

郑重声明，我使用 create-react-app 作为我的前端 React 应用程序的基础，如果这有所不同的话，到目前为止我的所有测试都在本地主机（使用 React 应用程序在 localhost:3000 上，"server" 在 localhost:8000 上）。

这是我的初始化文件：

import i18n from 'i18next';

import LanguageDetector from 'i18next-browser-languagedetector';
import Cache from 'i18next-localstorage-cache';
import Fetch from 'i18next-fetch-backend';

i18n
  .use(LanguageDetector)
  .use(Cache)
  .use(Fetch)
  .init({
    fallbackLng: 'en', 
    ns: ['common','app'],
    defaultNS: 'common',
    preload: ['en'], 
    wait: true,
    backend: {
      loadPath: 'http://localhost:8000/static/locales/{{lng}}/{{ns}}.json',
      addPath: 'http://localhost:8000/static/locales/{{lng}}/{{ns}}',
      parse: function (data) { console.log("DATA", data) },
      init: {
        mode: 'no-cors',
        credentials: 'include',
        cache: 'default'
      }
    },

    cache: {
      enabled: true,
      prefix: 'i18next_translations_',
      expirationTime: 24*60*60*1000 //one day
    },

    debug: true,

    detection: {
      order: ['localStorage', 'cookie'], 
      lookupCookie: 'i18nextLng',
      lookupLocalStorage: 'i18nextLng',
      caches: ["localStorage"] 
      //cookieMinutes: 10 // if we want the cookie to expire
    },

  });

export default i18n;

...然后包装我的应用程序的组件如下所示：

import React, { Component } from 'react';

import { I18nextProvider } from 'react-i18next'
import i18n from './i18n' // the init code from above

export default class Localize extends Component {
  render () {
    return (
      <I18nextProvider i18n={i18n}>
        {this.props.children}
      </I18nextProvider>
    )
  }
}

...最后，应该进行翻译的组件：

class TestTranslate extends Component {

  render () {
    const { t } = this.props;
    return (
      <div>
          {t('key1')}
          {t('key3')}
      </div>
    )
  }
}

export default translate()(LearnHome)

如果我在加载页面时查看 Chrome 调试器，我会看到以下内容：

执行了两条 FETCH 命令：一条用于 common.json，一条用于 app.json。在我看来，这两个 FETCH 命令看起来确实执行正确，但是根本没有数据进入 backend 初始化配置数据中的 parse() 函数。

事实上，如果我跳转到 Chrome 网络选项卡，浏览器似乎肯定认为数据已从服务器正确返回给浏览器：

所以我对发生的事情感到困惑。我仔细阅读了 i18next 文档和几个示例，但到目前为止还是一无所获。感谢任何帮助。

谢谢！

Answer 1

好的，我明白了。它与 i18next 无关。我们是运行一个 Django built-in 开发网络服务器，位于一个用于本地开发的 Vagrant 实例中。默认情况下，Django 的 Web 服务器不会将 headers 放在静态文件上，因为它们是 returned 给客户端的。我的本地客户端环境 (localhost:3000) 本质上是向我的本地 Django 环境 (localhost:8000) 发出 CORS 请求，因此我们不得不将我们的开发 Django 服务器重新配置为 return CORS headers 在静态文件请求上。

无法让 react-i18next 通过 FETCH 后端读取 JSON 文件

Cannot get react-i18next to read JSON files via FETCH backend

i18next

reactjs

create-react-app

react-i18next