本地部署Flask版Azure Immersive Reader遇Token过期报错求助

问题分析 #

点击Immersive Reader按钮弹出报错、控制台提示Token过期，核心原因通常是Token生成/传递逻辑错误、Token缓存过期或subdomain参数不正确。结合Flask部署场景，以下是针对性修复步骤：

具体修复步骤 #

1. 后端Token生成逻辑检查（app.py） #

确保Token通过Azure官方端点实时生成，且subdomain提取正确：

• 调用https://cognitiveservices.azure.com/sts/v1.0/issueToken生成Token，请求头携带正确的订阅密钥
• 从endpoint中正确提取subdomain（例如https://xxx.cognitiveservices.azure.com的subdomain为xxx）
• 避免提前生成Token并缓存，每次请求都实时获取

示例代码：

import os
import requests
from flask import Flask, jsonify

app = Flask(__name__)
# 从.env读取配置
IMMERSIVE_READER_ENDPOINT = os.getenv('IMMERSIVE_READER_ENDPOINT')
IMMERSIVE_READER_KEY = os.getenv('IMMERSIVE_READER_KEY')

@app.route('/api/get-immersive-token', methods=['GET'])
def get_immersive_token():
    if not IMMERSIVE_READER_ENDPOINT or not IMMERSIVE_READER_KEY:
        return jsonify({'error': '环境变量未配置'}), 500
    
    headers = {'Ocp-Apim-Subscription-Key': IMMERSIVE_READER_KEY}
    token_response = requests.post('https://cognitiveservices.azure.com/sts/v1.0/issueToken', headers=headers)
    
    if token_response.status_code != 200:
        return jsonify({'error': 'Token生成失败'}), token_response.status_code
    
    # 提取subdomain
    subdomain = IMMERSIVE_READER_ENDPOINT.split('.')[0].replace('https://', '')
    return jsonify({
        'token': token_response.text,
        'subdomain': subdomain
    })

2. 前端Token获取与SDK调用优化（helper.js） #

每次点击按钮时才请求新Token，避免使用缓存的过期Token：

• 异步获取后端Token，确保启动Immersive Reader时使用最新Token
• 配置SDK为中文界面，满足预期的中文读取需求
• 捕获错误并输出详细日志

示例代码：

async function launchImmersiveReader() {
    try {
        // 实时请求新Token
        const tokenRes = await fetch('/api/get-immersive-token');
        if (!tokenRes.ok) throw new Error('Token请求失败');
        
        const { token, subdomain } = await tokenRes.json();
        
        // 构造要读取的内容（根据实际页面结构调整）
        const content = {
            title: '页面内容',
            chunks: [{
                content: document.querySelector('.content-to-read').innerText,
                contentType: 'text/plain'
            }]
        };
        
        // 配置中文界面
        const options = { uiLang: 'zh-CN' };
        
        // 启动Immersive Reader
        await ImmersiveReader.launchAsync(token, subdomain, content, options);
    } catch (err) {
        console.error('Immersive Reader启动错误:', err);
        alert('启动失败，请检查控制台日志');
    }
}

// 绑定按钮事件
document.getElementById('ir-launch-btn').addEventListener('click', launchImmersiveReader);

3. 环境变量与前端页面检查 #

• .env文件：确认IMMERSIVE_READER_ENDPOINT和IMMERSIVE_READER_KEY配置正确，无多余空格或引号
• index.html：确保正确加载Immersive Reader SDK，按钮和内容元素的ID与JS代码匹配

  <!-- 加载SDK -->
  <script src="https://contentstorage.onenote.office.net/onenoteltir/immersivereadersdk/immersive-reader-sdk.1.0.0.js"></script>
  
  <!-- 页面元素 -->
  <button id="ir-launch-btn">启动沉浸式阅读器</button>
  <div class="content-to-read">需要读取的页面内容...</div>
  

验证步骤 #

1. 重启Flask应用，确保环境变量生效
2. 打开页面，点击按钮，检查控制台是否有新的Token请求
3. 确认Immersive Reader正常启动并以中文界面展示内容

内容的提问来源于stack exchange，提问作者Dev_Patel 20_61