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
相关产品推荐
相关产品推荐

