load resources files from anther back end end-point

Question

I added i18nex to react project, I want to load the resources files from another domain server such as my project hosted in "http://xxxx.com" and I added the files locally in the project in the public file then use loadPath: '/locales/{{lng}}/{{ns}}.json' it's working fine but my case I set my resources files in another server such as "http://yyyy.com/locales/{{lng}}/{{ns}}.json" the file is loaded in network tap but without data.

if i use loadPath: 'http://192.168.1.100/locales/{{lng}}/{{ns}}.json'

if i use loadPath: '/locales/{{lng}}/{{ns}}.json' , in the network tap url:http://localhost:3001/locales/en/translation.json the two files into different locations have the same content.

 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';

 export const backendOptions = {
    //loadPath: '/locales/{{lng}}/{{ns}}.json',
    loadPath: 'http://192.168.1.100/locales/{{lng}}/{{ns}}.json',

    crossDomain: true,
    requestOptions: {
       mode: 'no-cors',
       credentials: 'include',
       cache: 'default'
   },
   customHeaders: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
    "Accept": "*/*"
   },
}

i18n
.use(Backend)
//.use(LanguageDetector)
.use(initReactI18next)
.init({
    lng: 'en',
    initImmediate: false,
    fallbackLng: 'en',
    debug: true,
    react: {
        wait: true,
        useSuspense: false
    },
    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
    },
    backend: backendOptions
});
export default i18n;

my issue is I need to load my resources from end-point, totally different directory node.

felixmosh felixmosh · Accepted Answer · 2020-07-02T20:17:00

You can’t make an Ajax request to a different domain without allowing it, it considered a security issue. The browser blocks your cross domain request.

You need to add a CORS headers in the other domain’s response headers.

load resources files from anther back end end-point

1 Answers