在React（Next.js）中使用translate-google-api实现翻译遇网络错误

核心问题原因 #

直接在前端调用translate-google-api出现Network Error，主要是因为浏览器跨域限制——谷歌翻译的公开接口未配置CORS，前端无法直接发起跨域请求；另外你代码里目标语言设为vi（越南语），和需求的阿拉伯语不符。

解决步骤 #

1. 用Next.js API路由做代理（解决跨域）

在pages/api目录下新建translate.js文件，在服务端发起翻译请求（服务器端无跨域限制）：

import translate from 'translate-google-api';

export default async function handler(req, res) {
  const { text, targetLang } = req.body;
  try {
    const result = await translate(text, {
      tld: "com", // 改用通用域名，避免区域访问限制
      to: targetLang,
    });
    res.status(200).json({ result });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

2. 修改前端组件代码

调用自己的API路由，同时将目标语言改为阿拉伯语代码ar：

const changelanguage = async() => {
  try {
    const response = await fetch('/api/translate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        text: `I'm fine.`,
        targetLang: 'ar' // 阿拉伯语语言代码
      }),
    });
    const data = await response.json();
    console.log('language result is ' + data.result);
  } catch (error) {
    console.error('Translation error:', error);
  }
};

return(
  <button onClick={changelanguage}>Translate</button>
)

额外提示 #

translate-google-api依赖谷歌翻译的非公开接口，稳定性无法保证，生产环境建议使用官方的Google Cloud Translation API。

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