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

i'm trying use react-i18next on client using i18next-fetch-backend, , though can json translation files via browser, screwy how they're being handled during init routine.

for record, i'm using create-react-app basis of front-end react application, if makes difference, , far of testing in localhost (with react app on localhost:3000, , "server" on localhost:8000).

here's init file:

import i18n 'i18next';  import languagedetector 'i18next-browser-languagedetector'; import cache 'i18next-localstorage-cache'; import fetch '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 want cookie expire     },    });  export default i18n; 

...and component wraps app looks this:

import react, { component } 'react';  import { i18nextprovider } 'react-i18next' import i18n './i18n' // init code above  export default class localize extends component {   render () {     return (       <i18nextprovider i18n={i18n}>         {this.props.children}       </i18nextprovider>     )   } } 

...and finally, component translation should happen:

class testtranslate extends component {    render () {     const { t } = this.props;     return (       <div>           {t('key1')}           {t('key3')}       </div>     )   } }  export default translate()(learnhome) 

if @ chrome debugger when load page, see following:

two fetch commands executed: 1 common.json , 1 app.json. eye, sure looks both fetch commands execute properly, no data @ making parse() function in backend init config data.

and in fact, if pop on chrome network tab, browser sure seems think data returned browser server:

so i'm baffled what's going on. i've pored through i18next docs , several examples, have far come empty. appreciated.

thanks!

okay, figured out. it's got nothing i18next. running django built-in dev web server inside vagrant instance local development. default, django's web server doesn't put headers on static files returned client. local client environment (localhost:3000) in essence making cors request local django environment (localhost:8000), had reconfigure our dev django server return cors headers on static file requests.