ReactJS自定义Translator组件调用Google Translate API转换数据失败求助

常见问题分析 #

你的Translator组件无法工作，通常是以下几个核心问题导致：

1. API调用格式错误
2. 跨域限制（浏览器同源策略拦截）
3. API密钥未正确配置或暴露风险
4. 响应数据解析逻辑异常

修复方案 #

1. 修正API请求格式 #

Google Translate API v2的POST请求，参数应放在请求体中而非URL参数，同时需指定正确的请求头：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

interface PropsType {
  text: string,
  language?: string
}

const Translator: React.FC<PropsType> = ({ text, language = "en" }) => {
  const [convertedText, setConvertedText] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 空文本跳过请求
    if (!text.trim()) {
      setConvertedText('');
      return;
    }

    setLoading(true);
    axios.post(
      'https://translation.googleapis.com/language/translate/v2',
      {
        q: text,
        target: language,
        key: '你的实际API密钥' // 替换为有效密钥
      },
      {
        headers: { 'Content-Type': 'application/json' }
      }
    )
    .then((response) => {
      // 安全校验响应结构
      if (response.data?.data?.translations?.length) {
        setConvertedText(response.data.data.translations[0].translatedText);
        setError('');
      } else {
        setError('翻译返回数据格式异常');
      }
    })
    .catch((err) => {
      console.error('翻译API错误:', err);
      setError(`翻译失败: ${err.response?.data?.error?.message || err.message}`);
    })
    .finally(() => setLoading(false));
  }, [text, language]);

  if (loading) return <div>翻译中...</div>;
  if (error) return <div style={{ color: 'red' }}>{error}</div>;

  return <>{convertedText}</>;
};

export default Translator;

2. 解决跨域与密钥安全问题 #

前端直接调用Google API会触发跨域拦截，且暴露密钥存在被盗用风险，推荐通过后端代理转发请求：

示例Node.js后端代理（Express）

const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();
const PORT = 3001;

app.use(cors());
app.use(express.json());

app.post('/api/translate', async (req, res) => {
  const { text, target = 'en' } = req.body;
  try {
    const response = await axios.post(
      'https://translation.googleapis.com/language/translate/v2',
      { q: text, target, key: '你的实际API密钥' }
    );
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { error: '翻译失败' });
  }
});

app.listen(PORT, () => console.log(`代理服务器运行在 http://localhost:${PORT}`));

前端修改调用地址

将组件中的API地址改为自己的后端接口：

axios.post(
  'http://localhost:3001/api/translate',
  { q: text, target: language }
)
// 后续处理逻辑不变

3. 验证API密钥与权限 #

1. 登录Google Cloud控制台，确保已启用Cloud Translation API
2. 检查API密钥权限：给密钥分配Cloud Translation API User角色
3. 生产环境禁止在前端代码中硬编码密钥，必须通过后端代理隐藏

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