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

Question

我尝试使用react-i18next在客户端上使用i18next-fetch-backend，即使我可以通过浏览器访问JSON翻译文件，但他们如何使用＃39} ;在init例行程序中处理。

为了记录，我使用create-react-app作为我的前端React应用程序的基础，如果这有所不同，到目前为止我的所有测试都在localhost中（使用React应用程序）在localhost：3000上，＆＃34;服务器＆＃34;在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命令都正确执行，但是根本没有数据进入parse() init配置数据中的backend函数。

事实上，如果我转到Chrome网络标签页，浏览器肯定会认为数据已从服务器正确返回到浏览器：

所以我对于发生了什么感到困惑。我通过i18next文档和几个例子仔细研究过，但到目前为止还是空洞的。任何帮助表示赞赏。

谢谢！

Answer 1

好的，我想出来了。它与i18next无关。我们在Vagrant实例中运行Django内置开发Web服务器以进行本地开发。默认情况下，Django的Web服务器不会将标头放在静态文件上，因为它们会返回给客户端。我的本地客户端环境（localhost:3000）本质上是向我的本地Django环境（localhost:8000）发出CORS请求，因此我们必须重新配置我们的dev Django服务器以在静态文件请求上返回CORS头。