Vue.js 与 Flask 交互时跨浏览器搜索结果不一致问题的解决方案

本文解决 Vue.js 前端向 Flask 后端发起搜索请求后，在 Windows Chrome 中正常显示图文结果，但在 Android Chrome、Opera、Edge 等浏览器中图片丢失（仅 Firefox 正常）的问题，核心原因是字符串匹配未统一大小写导致移动端浏览器匹配失败。

本文解决 Vue.js 前端向 Flask 后端发起搜索请求后，在 Windows Chrome 中正常显示图文结果，但在 Android Chrome、Opera、Edge 等浏览器中图片丢失（仅 Firefox 正常）的问题，核心原因是字符串匹配未统一大小写导致移动端浏览器匹配失败。

在 Vue.js + Flask 的文档搜索应用中，前端通过 URL 查询参数（如 ?q=keyword）触发后端检索 .docx 文件，后端解析文档内容并提取包含关键词的段落及内嵌图片。问题表现为：Windows 版 Chrome 能完整渲染文本和图片，而 Android Chrome、Edge、Opera 却只显示文本、图片全部缺失——但 Firefox 在所有平台均正常。

根本原因并非网络兼容性、CORS 或路径错误，而是后端 extract_content() 函数中关键词匹配逻辑存在隐式大小写敏感缺陷：

# ❌ 原始代码（问题所在）
if id_str in text:  # 字符串包含判断未标准化大小写
    is_collecting = True

不同浏览器对 JavaScript 字符串处理或 HTTP 请求头无直接影响，但此处的关键在于：Flask 接收的 query 参数（id_str）与 .docx 文档中实际文本（text）的大小写可能不一致。Windows Chrome 下测试时，文档文本与查询词恰好大小写匹配（如均为小写），而 Android 设备上用户输入更易混用大小写（如首字母大写），导致 id_str in text 判断失败，is_collecting = False 永远不被置为 True，进而跳过后续图片提取逻辑。

✅ 正确做法是在匹配前统一转为小写（或大写）进行比较：

def extract_content(doc_path, id_str):
    doc = Document(doc_path)
    extracted_data = []
    image_directory = r"C:/Users/ID/Desktop/vue.jsExample/Vue-3/MaidsPost/public/static/extracted_images"
    os.makedirs(image_directory, exist_ok=True)

    is_collecting = False
    # ✅ 关键修复：统一转小写进行匹配
    id_str_lower = id_str.lower()

    for para in doc.paragraphs:
        text = para.text.strip()
        text_lower = text.lower()  # 统一转换

        if id_str_lower in text_lower:
            is_collecting = True
        elif "extracted_time: " in text and is_collecting:
            is_collecting = False

        if is_collecting and text:  # 避免空段落干扰
            extracted_data.append({'type': 'text', 'content': text})

        # ✅ 图片提取也需在 is_collecting 为 True 时执行
        if is_collecting:
            for run in para.runs:
                for shape in run.element.iter():
                    if shape.tag.endswith('blip'):
                        try:
                            image_rid = shape.attrib['{http://schemas.openxmlformats.org/officeDocument/2006/relationships}embed']
                            image_part = doc.part.related_parts[image_rid]
                            image_filename = f"extracted_image_{uuid.uuid4()}.png"
                            image_path = os.path.join(image_directory, image_filename)
                            with open(image_path, 'wb') as f:
                                f.write(image_part.blob)
                            extracted_data.append({'type': 'image', 'content': image_filename})
                        except (KeyError, AttributeError, OSError) as e:
                            print(f"Image extraction failed: {e}")
                            continue
    return extracted_data

⚠️ 注意事项：

• 永远避免裸字符串 in 匹配而不做大小写归一化，尤其在用户输入场景；
• 移动端浏览器（尤其是 Chromium 内核）对 JS 执行环境更严格，但本例问题实为 Python 后端逻辑缺陷，与前端无关；
• 前端无需修改 Axios 请求逻辑，但建议在 fetchSearchResults 中添加加载状态与空结果提示，提升体验；
• 图片路径 /static/extracted_images/xxx.png 需确保 Flask 静态文件路由正确配置（如 app.static_folder = 'public/static'），且 Android Chrome 对本地路径无特殊限制（因是服务端返回的相对 URL）；
• 开发阶段可加日志验证：print(f"[DEBUG] Matching '{id_str_lower}' in '{text_lower}': {id_str_lower in text_lower}")。

总结：跨浏览器行为差异常被误判为前端兼容性问题，但本例本质是后端字符串匹配逻辑鲁棒性不足。通过强制统一大小写，即可彻底解决 Android 端图片丢失问题，同时提升整体搜索可靠性。