路径和查询字符串中的语言检测在 AWS s3 存储桶上工作不正确

Question

我正在开发 React 网络应用程序，我使用 i18n 和 i18next-browser-languagedetector 来翻译应用程序。在我的本地一切正常，即使在服务器上一切都以相同的方式工作。但是我在 aws s3 存储桶上遇到了问题。在我构建我的 React 项目并将其上传到 s3 存储桶后，i18n 停止正常工作。

我是 aws 的新用户，所以我可能做错了什么，对此深表歉意。

我的 s3 存储桶配置：

静态网站托管 具有以下重定向规则

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com",
            "ReplaceKeyPrefixWith": "#!/"
        }
    },
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
            "HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com",
            "ReplaceKeyPrefixWith": "#!/"
        }
    }
]

首先，我在路径中将当前语言传递为 my-bucket-name.s3-website-sa-east-1.amazonaws.com/en/但是当我加载网络应用程序时，即使我在路径中设置了另一种语言，我总是会看到检测到的语言。然后我尝试将查询字符串中的语言设置为 my-bucket-name.s3-website-sa-east-1.amazonaws.com/?lang=en 我遇到了同样的错误行为。我的 i18n 文件。

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
const options = {
    order: ['querystring'],
    lookupQuerystring: 'lng',
};
const languages = ["en", "pt"]

i18n.use(LanguageDetector).init({
    detection: options,
    resources: {...},
    fallbackLng: "en",
    debug: true,
    whitelist: languages,
    checkWhitelist: true ,
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false, 
    interpolation: {
        escapeValue: false, 
        formatSeparator: ","
    },
    react: {
        wait: true
    }
});

export default i18n;

我还尝试将后备语言设置为 pt，在这种情况下，在 aws s3 存储桶上它始终检测为 pt，即使在路径或查询字符串中我设置了 en。

所以它总是出于某种原因使用后备语言。

为什么语言检测可能无法在 aws s3 存储桶上运行？也许有人面临类似的问题？

Answer 1

我遇到了同样的问题，我无意中找到了解决方案。检查您在 Error document 字段中是否以与在 Index document 字段中相同的方式编写了 index.html。如果有斜线，请将其删除。另外，将重定向规则字段设为空。

路径和查询字符串中的语言检测在 AWS s3 存储桶上工作不正确

Language detection in the path and query string works incorrectly on AWS s3 bucket

javascript

amazon-s3

amazon-web-services

i18next

reactjs