i18next backend translation.json fetch problem

Question

When I try to fetch translation files from NodeJS backend with React. I am getting below error.

Access to fetch at 'http://localhost:8080/assets/locales/en/translation.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My react structure is like below;

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

i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: 'tr',
    fallbackLng: 'tr',
    preload: ['tr', 'en'],
    ns: ['translation'],
    defaultNS: 'translation',
    debug: true,    
    backend: {
      // for all available options read the backend's repository readme file
      loadPath: 'http://localhost:8080/assets/locales/{{lng}}/{{ns}}.json',      
    }
    
  });
export default i18n;

and NodeJS is like;

app.use('/assets',
    express.static(path.join(__dirname, 'assets')));

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    
    next();
});

As you can see I gave access to the related folder and it should fetch the json file content, Because on NodeJS side if I try to fetch the translations with i18next package I can successfully fetch it. Below code is running without problems.

const i18next = require('i18next')
const HttpBackend = require('i18next-http-backend')
// const HttpBackend = require('../../cjs')
i18next.use(HttpBackend).init({
  lng: 'en',
  fallbackLng: 'en',
  preload: ['en', 'tr'],
  ns: ['translation'],
  defaultNS: 'translation',
  backend: {
    loadPath: 'http://localhost:8080/assets/locales/{{lng}}/{{ns}}.json'
  }
}, (err, t) => {
  if (err) return console.error(err)
  console.log(t('welcome'))
  console.log(t('welcome', { lng: 'tr' }))
})

Please help thanks.

Does this answer your question? [Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?](https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my) — Celsiuss, Aug 20 '20 at 11:54

score 0 · Answer 1 · answered Aug 21 '20 at 07:50

I solved the issue. I just made CORS allowance code after static path allowance code. So; 1- Request is coming from front end with headers etc. and try to reach to the static localization folder 2- But CORS policy is stopping the request because it is not active when localization folder has been reached.

When I change the order of my code like below it worked.

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    
    next();
});

app.use('/assets',
    express.static(path.join(__dirname, 'assets')));

i18next backend translation.json fetch problem

1 Answers1