title: Cannot get react-i18next to read JSON files via FETCH backend
body: <p>I'm trying to use <code>react-i18next</code> on the client using the <code>i18next-fetch-backend</code>, 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 <code>init</code> routine.</p>
  
  <p>For the record, I'm using <code>create-react-app</code> 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).</p>
  
  <p>Here's my init file:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>...and then the Component that wraps my app looks like this:</p>
  
  <pre><code>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 (
        &lt;I18nextProvider i18n={i18n}&gt;
          {this.props.children}
        &lt;/I18nextProvider&gt;
      )
    }
  }
  </code></pre>
  
  <p>...and finally, the Component where the translation should happen:</p>
  
  <pre><code>class TestTranslate extends Component {
  
    render () {
      const { t } = this.props;
      return (
        &lt;div&gt;
            {t('key1')}
            {t('key3')}
        &lt;/div&gt;
      )
    }
  }
  
  export default translate()(LearnHome)
  </code></pre>
  
  <p>If I look at the Chrome debugger when I load the page, I see the following:
  <a href="https://i.stack.imgur.com/kYP5J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYP5J.png" alt="Chrome console"></a></p>
  
  <p>Two FETCH commands are executed: one for <code>common.json</code> and one for <code>app.json</code>. To my eye, it sure looks like both FETCH commands execute properly, but then no data at all is making it to the <code>parse()</code> function in the <code>backend</code> init config data.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/t3mnS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t3mnS.png" alt="Chrome network tab"></a></p>
  
  <p>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.</p>
  
  <p>Thanks!</p>