i18next后端translation.json提取问题

问题描述

当我尝试使用React从NodeJS后端获取翻译文件时。我遇到错误了。

访问地址为 来源中的'http：// localhost：8080 / assets / locales / en / translation.json' “ http：// localhost：3000”已被CORS策略阻止：否 请求中出现“ Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

我的反应结构如下；

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;

和NodeJS一样；

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

如您所见，我授予了相关文件夹的访问权限，它应该获取json文件的内容，因为在NodeJS方面，如果我尝试使用i18next软件包获取翻译，则可以成功获取它。下面的代码运行正常。

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'],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' }))
})

请帮助谢谢。

解决方法

我解决了这个问题。我只是在静态路径允许代码之后制作了CORS允许代码。所以; 1-请求来自前端，带有标头等，并尝试访问静态本地化文件夹 2-但是CORS策略正在停止请求，因为到达本地化文件夹后该请求不处于活动状态。

当我像下面这样更改代码的顺序时，就会起作用。

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')));