如何让浏览器渲染EventSource流式内容中的链接

DevOps 小满

2026-7-9

解决方案：EventSource流式内容中HTML链接无法渲染的问题

问题根源

你收到的流式内容里，HTML链接标签是转义后的HTML实体（比如<a href='xxx'>），而非原始的<a>标签。浏览器解析innerHTML时，会把这些实体当作普通文本显示，不会渲染成可点击链接。

修复步骤

方法1：修改后端Prompt（推荐）

直接让OpenAI返回未转义的原始HTML标签，无需前端额外处理。在发送给GPT的prompt末尾添加明确要求：

# 示例：在你的prompt最后追加规则
prompt += "\n请直接返回包含<a>标签的HTML格式内容，不要对HTML标签进行任何转义处理"

这样GPT返回的内容会是<a href='xxx'>链接文本</a>，而非转义后的实体，前端通过innerHTML += event.data就能直接渲染出可点击链接。

方法2：前端处理转义实体（后端无法修改时）

如果无法调整后端prompt，可在前端添加转义还原函数，将HTML实体转换回原始标签：

const responseDisplay = document.getElementById('response-display');
const eventSource = new EventSource('http://127.0.0.1:8000/do-chat');

// 新增转义还原函数
function unescapeHtml(html) {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = html;
    return tempElement.textContent;
}

eventSource.onmessage = function(event) {
    // 先还原转义实体，再追加到DOM
    responseDisplay.innerHTML += unescapeHtml(event.data);
};

eventSource.onerror = function(error) {
    console.error('EventSource failed:', error);
    eventSource.close();
};