无用户认证的公共Svelte SPA如何安全使用Azure文本转语音服务？

核心结论 #

必须通过中间层（后端服务/无服务器函数）转发请求，绝对不能直接在客户端代码中暴露Azure TTS的API密钥——SPA的客户端代码完全公开，密钥会被轻易窃取，引发服务滥用、超额计费等问题。

可行方案 #

1. 用Azure Function封装请求（推荐）

这是最轻量化的方案，无需维护服务器，按需付费，配置简单：

• 创建一个HTTP触发的Azure Function，将Azure TTS的API密钥和区域信息存在Function的应用设置中（不要硬编码在代码里）。
• 函数接收前端传来的待转换文本，调用Azure TTS服务，将生成的音频返回给前端。
• 前端Svelte只需调用这个Function的公开URL，传入文本即可，全程不接触密钥。

示例Node.js版Azure Function代码：

const axios = require('axios');

module.exports = async function (context, req) {
    const { text } = req.body;
    if (!text) {
        context.res = { status: 400, body: "请提供要转换的文本" };
        return;
    }

    try {
        const ttsKey = process.env.AZURE_TTS_KEY;
        const ttsRegion = process.env.AZURE_TTS_REGION;

        // 获取Azure TTS访问令牌
        const tokenRes = await axios.post(
            `https://${ttsRegion}.api.cognitive.microsoft.com/sts/v1.0/issueToken`,
            null,
            { headers: { 'Ocp-Apim-Subscription-Key': ttsKey } }
        );
        const accessToken = tokenRes.data;

        // 调用文本转语音API生成音频
        const audioRes = await axios.post(
            `https://${ttsRegion}.tts.speech.microsoft.com/cognitiveservices/v1`,
            `<speak version='1.0' xml:lang='zh-CN'>
                <voice xml:lang='zh-CN' xml:gender='Female' name='zh-CN-XiaoxiaoNeural'>${text}</voice>
            </speak>`,
            {
                headers: {
                    'Authorization': `Bearer ${accessToken}`,
                    'Content-Type': 'application/ssml+xml',
                    'X-Microsoft-OutputFormat': 'audio-16khz-128kbitrate-mono-mp3'
                },
                responseType: 'arraybuffer'
            }
        );

        context.res = {
            status: 200,
            headers: { 'Content-Type': 'audio/mpeg' },
            body: audioRes.data
        };
    } catch (err) {
        context.res = { status: 500, body: `转换失败：${err.message}` };
    }
};

2. 搭建自有后端服务

如果后续需要扩展更多业务逻辑，可以选择自己搭建后端（比如Node.js/Express、Python/Flask等）：

• 将Azure TTS的密钥存在后端的环境变量中，避免硬编码。
• 后端提供一个专用接口，接收前端的文本请求，转发到Azure TTS服务，再把音频结果返回给前端。
• 优势是灵活性更高，适合复杂业务场景；缺点是需要自行维护服务器的部署、运维和扩容。

针对你的问题的直接解答 #

• 是否必须搭建后端服务？是的——必须通过中间层隔离API密钥，客户端不能直接调用Azure TTS服务。
• 是否需要封装到Azure Function？不是必须，但这是最适合这类轻量需求的方案——它省去了服务器运维成本，快速就能搭建好安全的转发层。

额外建议 #

• 给中间层接口添加限流规则（比如Azure Function自带限流配置，或在代码中实现），防止恶意高频调用导致费用超标。
• 永远不要在Svelte的组件代码、静态资源中以任何形式暴露Azure TTS的API密钥。

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