使用 next-i18next 库更改语言时有 CORS答案

【问题标题】：having CORS when changing language with next-i18next library使用 next-i18next 库更改语言时有 CORS
【发布时间】：2020-08-01 21:22:04
【问题描述】：

我在使用 i18n.changeLanguage 函数更改语言时遇到了 cors。我有两个具有 onClick 方法的按钮并调用一个名为 changeLang 的自定义函数。在该函数中，我正在调用 i18n.changeLanguage 函数并将其传递给 lng 参数.


    const changeLang = lng => {
      i18n.i18n.changeLanguage(lng);
    };


    <button onClick={() => changeLang('en')} className="en">
       EN
    </button>
    <button onClick={() => changeLang('tr')} className="tr">
       TR
    </button>

我的 i18n 配置是这样的。

import NextI18Next from 'next-i18next';
import { initReactI18next } from 'react-i18next';

export default new NextI18Next({
  use: [initReactI18next],
  defaultLanguage: 'tr',
  fallbackLng: 'en',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en',
  },
  localePath: '/app/static/locales',
  detection: {
    order: ['cookie', 'localStorage'],
    lookupCookie: 'next-i18next',
    lookupLocalStorage: 'i18nextLng',
    caches: ['cookie', 'localStorage'],
  },
});

【问题讨论】：

需要看

标签： localization next.js i18next next-i18next

【解决方案1】：

从库的source code 看来，默认的localePath 有一个public/static/locales 作为值。

注意它没有第一个斜线，请尝试将其删除。

【讨论】：

【解决方案2】：

我收到了错误。这是正确的版本。我在其中添加了后端对象和 loadPath，它解决了问题。

import NextI18Next from 'next-i18next';
import { initReactI18next } from 'react-i18next';

export default new NextI18Next({
  use: [initReactI18next],
  defaultLanguage: 'tr',
  fallbackLng: 'en',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en',
  },
  localePath: '/app/static/locales',
  detection: {
    order: ['cookie', 'localStorage'],
    lookupCookie: 'next-i18next',
    lookupLocalStorage: 'i18nextLng',
    caches: ['cookie', 'localStorage'],
  },
  backend: {
   loadPath: 'app/static/locales/{{lng}}/{{ns}}.json',
  }
});

【讨论】：