无法获取react-i18next通过FETCH后端读取JSON文件 [英] Cannot get react-i18next to read JSON files via FETCH backend
问题描述
我正在尝试使用 i18next-fetch-backend 在客户端上使用 react-i18next ，即使我可以通过浏览器，在 init 例程中如何处理它们有些麻烦.
I'm trying to use react-i18next on the client using the i18next-fetch-backend, and even though I can get to the JSON translation files via a browser, something is screwy with how they're being handled during the init routine.
为了记录，我将 create-react-app 用作前端React应用程序的基础(如果有所不同)，到目前为止，我所有的测试都在localhost中进行.(React应用位于localhost:3000上，服务器"位于localhost:8000上).
For the record, I'm using create-react-app as the basis of my front-end React application, if that makes a difference, and so far all of my testing is in localhost (with the React app on localhost:3000, and the "server" on 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;
...然后包裹我的应用程序的组件看起来像这样:
...and then the Component that wraps my app looks like this:
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>
)
}
}
...最后，是应该进行翻译的组件:
...and finally, the Component where the translation should happen:
class TestTranslate extends Component {
render () {
const { t } = this.props;
return (
<div>
{t('key1')}
{t('key3')}
</div>
)
}
}
export default translate()(LearnHome)
如果我在加载页面时查看Chrome调试器，则会看到以下内容:
If I look at the Chrome debugger when I load the page, I see the following:
执行两个FETCH命令:一个用于 common.json ，另一个用于 app.json .在我看来，可以肯定两个FETCH命令都正确执行了，但是没有数据将其传递给 backend 初始配置数据中的 parse()函数.
Two FETCH commands are executed: one for common.json and one for app.json. To my eye, it sure looks like both FETCH commands execute properly, but then no data at all is making it to the parse() function in the backend init config data.
事实上，如果我跳到Chrome的网络"标签，那么浏览器肯定会认为数据已正确地从服务器返回到浏览器:
And in fact, if I pop over to the Chrome network tab, the browser sure seems to think that the data was properly returned to the browser from the server:
所以我对发生的事情感到困惑.我已经仔细研究了i18next文档和一些示例，但到目前为止还没有介绍.感谢您的帮助.
So I'm baffled as to what's going on. I've pored through the i18next docs and several examples, but have so far come up empty. Any help is appreciated.
谢谢！
推荐答案
好的，我知道了.它与i18next无关.我们正在Vagrant实例中运行Django内置的dev Web服务器，以进行本地开发.默认情况下，Django的Web服务器不会将标头放到静态文件中，因为标头会返回给客户端.我的本地客户端环境( localhost:3000 )本质上是向我的本地Django环境( localhost:8000 )发出CORS请求，因此我们必须重新配置我们的开发Django服务器在静态文件请求上返回CORS标头.
Okay, I figured this out. It's got nothing to do with i18next. We are running a Django built-in dev web server inside a Vagrant instance for local development. By default, Django's web server doesn't put headers on static files as they are returned to the client. My local client environment (localhost:3000) was in essence making a CORS request to my local Django environment (localhost:8000), so we had to reconfigure our dev Django server to return CORS headers on static file requests.
这篇关于无法获取react-i18next通过FETCH后端读取JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
