React Native集成Google Translate API出现401错误求助

问题背景 #

已在Google Cloud创建Translate账户、生成API密钥并获取凭证，该API在Postman和React.js Web项目中调用完全正常，但集成到React Native聊天应用时，出现401未授权错误并导致会话终止，重新登录后问题依旧。

相关截图说明 #

• 截图1：显示请求返回401未授权错误，伴随会话终止提示
• 截图2：显示Web项目与Postman中API调用成功的结果

项目相关代码 #

const handleTranslate = async () => {
    try {
      const translatedConfessionText = await translateText(
        selectedConfession.confess,
      );
      const translatedTitle = await translateText(selectedConfession.title);
      setTranslatedConfessionText(translatedConfessionText);
      setTranslatedTitle(translatedTitle);
    } catch (error) {
      console.error('Error translating text:', error);
    }
  };

  const translateText = async text => {
    try {
      const response = await axios.post(
        'https://translation.googleapis.com/language/translate/v2?key=********',
        {
          q: text,
          source: 'tr',
          target: 'en',
        },
      );
      return response.data.data.translations[0].translatedText;
    } catch (error) {
      console.error('Error translating text:', error.response.data);
      throw error;
    }
  };

<Text style={styles.modalText}>
  {translatedConfessionText || selectedConfession?.confess}
</Text>

排查及解决方向 #

• 检查API密钥的访问限制
  登录Google Cloud控制台，查看Translate API密钥的应用限制：若设置了「HTTP referrers（网站限制）」，React Native应用无法匹配该规则会被拦截，需改为设置「IP地址限制」（适用于固定IP服务器调用场景），或暂时取消限制做测试；同时确认密钥是否仅允许Translate API调用，避免权限范围不足。

• 排查React Native网络配置

  • 安卓端：确认AndroidManifest.xml中已添加<uses-permission android:name="android.permission.INTERNET" />网络权限
  • iOS端：检查Info.plist的NSAppTransportSecurity配置，确保允许访问Google的HTTPS地址，可临时设置NSAllowsArbitraryLoads为YES测试（正式环境建议针对性配置）
  • 替换axios为原生fetch发起请求，排除axios配置问题：

    const translateText = async text => {
      try {
        const response = await fetch(
          'https://translation.googleapis.com/language/translate/v2?key=你的API密钥',
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ q: text, source: 'tr', target: 'en' }),
          }
        );
        const data = await response.json();
        return data.data.translations[0].translatedText;
      } catch (error) {
        console.error('Error translating text:', error);
        throw error;
      }
    };
    

• 检查应用内会话与密钥配置
  确认React Native应用中是否存在会话拦截、请求参数篡改的逻辑；检查API密钥是否在打包过程中正确注入，是否误用了错误的环境变量或密钥值。

• 查看Google Cloud日志详情
  登录Google Cloud控制台进入Translate API的日志页面，查看401错误的具体触发原因，明确是密钥无效、权限不足还是请求被拦截。

内容的提问来源于stack exchange，提问作者Hakan Hakan