FET 백엔드를 통해 JSON 파일을 읽는 반응 i18next를 얻을 수 없습니다.

Question

을 사용하는 클라이언트에서 react-i18next을 사용하려고하는데, 브라우저를 통해 JSON 변환 파일을 가져올 수 있지만, init 루틴 중에 처리됩니다.

필자는 create-react-app을 프론트 엔드 React 애플리케이션의 기초로 사용하고 있는데, 차이가 있다면 지금까지 내 테스트가 모두 localhost (React 앱은 localhost : 3000, localhost의 "server": 8000).

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> 
    ) 
    } 
} 

... 그리고 마지막으로, 구성 요소 위치를 번역해야 내 응용 프로그램은 다음과 같습니다 랩

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; 

... 다음 구성 요소 :

여기 내 init 파일의 발생 :

페이지를로드 할 때 Chrome 디버거를 보면 다음과 같습니다.

두 FETCH 명령이 실행됩니다. 하나는 common.json이고 다른 하나는 app.json입니다. 필자의 눈에는 두 FETCH 명령이 모두 제대로 실행 된 것처럼 보이지만, 데이터는 backend 초기화 구성 데이터의 parse() 함수로 보내지 않습니다.

그래서 난 : 나는 크롬 네트워크 탭을 통해 팝업 경우

그리고 사실

는, 브라우저는 반드시 데이터가 제대로 서버에서 브라우저에 반환되었다고 생각하는 것 같다 무슨 일이 벌어지고 있는지에 대해 당황스러워했다. 나는 i18next 문서와 몇 가지 예제를 훑어 보았지만, 지금까지 비어있게되었습니다. 어떤 도움을 주셔서 감사합니다.

감사합니다!

Answer 1

좋아요, 알아 냈습니다. i18next와는 아무런 관련이 없습니다. 우리는 로컬 개발을 위해 Vagrant 인스턴스 내부에 Django 내장형 웹 서버를 실행하고 있습니다. 기본적으로 Django의 웹 서버는 클라이언트에 반환 될 때 정적 파일에 헤더를 넣지 않습니다. 내 로컬 클라이언트 환경 (localhost:3000)은 본질적으로 내 로컬 장고 환경 (localhost:8000)에 CORS 요청을하기 때문에 정적 파일 요청시 CORS 헤더를 반환하기 위해 장고 Django 서버를 재구성해야했습니다.