You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chrome扩展调用Google翻译TTS API遇CORS跨域错误排查

调用Google TTS API时的CORS错误问题

我正在开发一款Chrome扩展,通过调用https://translate.google.com/translate_tts API获取TTS媒体资源,但设置audio.crossOrigin = "anonymous";时出现如下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://translate.google.com/translate_tts?client=tw-ob&tl=en-US&q=hello. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

以下是我的JS代码和Manifest V3配置文件,而类似实现的simple-translate扩展却无此错误,请问问题出在哪里?

我的JS代码

function tts(flag_id, lang) {
  document.getElementById(flag_id).addEventListener('click', () => {
    let query = document.getElementById('search-input').value;
    let source = `https://translate.google.com/translate_tts?client=tw-ob&tl=${lang}&q=${query}`;
    let audio = new Audio(source);
    audio.crossOrigin = "anonymous";
    audio.load();
    audio.play();
  });
}

我的Manifest V3配置

{
   "author": "*",
   "manifest_version": 3,
   "name": "*",
   "short_name": "*",
   "description": "*",
   "version": "7.1.1",
   "action": {
      "default_icon": {
         "128": "images/AppIcon.png",
         "256": "images/AppIcon.png"
      },
      "default_popup": "popup.html",
      "default_title": "*"
   },
   "host_permissions": [
      "https://*.google.com/*"
   ],
   "icons": {
      "128": "images/AppIcon.png",
      "16": "images/AppIcon.png",
      "256": "images/AppIcon.png"
   },
   "permissions": [
      "<all_urls>",
      "activeTab",
      "contextMenus",
      "scripting"
   ],
   "background": {
      "scripts": [
         "scripts/background.js"
      ]
   },
   "options_ui": {
      "page": "info.html"
   },
   "commands": {
      "_execute_action": {
         "suggested_key": {
            "chromeos": "Ctrl+Alt+V",
            "default": "Ctrl+Alt+V",
            "linux": "Ctrl+Alt+V",
            "mac": "Ctrl+Alt+V",
            "windows": "Ctrl+Alt+V"
         }
      }
   },
   "omnibox": {
      "keyword": "ms"
   }
}

simple-translate扩展的相关代码

const playAudio = async (text, lang) => {
  const url = `https://translate.google.com/translate_tts?client=tw-ob&q=${encodeURIComponent(
    text
  )}&tl=${lang}`;
  const audio = new Audio(url);
  audio.crossOrigin = "anonymous";
  audio.load();
  await audio.play().catch(e => log.error(logDir, "playAudio()", e, url));
};

内容的提问来源于stack exchange,提问作者Emre Karatopuk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 16:15:08