React项目中如何访问CDN上的私有静态文件

安全阿岳

2026-8-9

解决i18next访问CDN私有翻译文件的方案

1. 给请求添加鉴权头

i18next-http-backend支持自定义请求配置，你可以在初始化时通过requestOptions添加CDN要求的鉴权信息（比如Bearer Token、API Key等），让请求通过CDN的权限校验。

示例代码：

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

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: 'https://your-cdn-domain/{{lng}}/{{ns}}.json',
      requestOptions: {
        headers: {
          'Authorization': 'Bearer YOUR_PRIVATE_ACCESS_TOKEN',
          'X-CDN-Auth': 'YOUR_CDN_SPECIFIC_KEY'
        },
        mode: 'cors' // 跨域场景下需配置
      }
    },
    lng: 'zh-CN',
    fallbackLng: 'zh-CN',
    interpolation: {
      escapeValue: false
    }
  });

2. 使用临时签名URL访问

如果你的CDN支持生成临时签名URL（如阿里云OSS、AWS S3等），可以通过后端生成带有效期的授权URL，前端请求该URL获取私有翻译文件：

前端调用自有后端接口，传入目标语言和命名空间
后端根据CDN签名规则生成临时可访问URL并返回
前端将该URL传入i18next的loadPath，或动态修改配置

示例代码（动态生成loadPath）：

// 从后端获取签名URL
async function fetchSignedUrl(lng, ns) {
  const res = await fetch(`/api/get-translation-url?lng=${lng}&ns=${ns}`);
  const { signedUrl } = await res.json();
  return signedUrl;
}

// 初始化i18n
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: async (lng, ns) => await fetchSignedUrl(lng, ns)
    },
    // 其他基础配置...
  });