如何识别 fetch 跨域流中的安全上下文限制导致的高级 Stream API 失效问题-js教程-PHP中文网

fetch跨域流失效主因是安全上下文缺失：仅https、localhost/127.0.0.1（部分旧版需启用）属安全上下文，http://、file://不支持；须用self.issecurecontext验证，且响应需含合法content-type与cors头，再捕获getreader()异常确认。

如何识别 fetch 跨域流中的安全上下文限制导致的高级 stream api 失效问题

识别 fetch 跨域流中因安全上下文限制导致的 ReadableStream 失效问题，关键在于理解：浏览器仅在**安全上下文（secure context）** 中才允许对跨域响应流进行读取操作；若当前页面不满足安全上下文条件（如运行在 http://、file:// 或非受信任的 localhost），即使 fetch 成功发起、响应头合法、CORS 通过，调用 response.body.getReader() 或 response.body.pipeTo() 仍会直接抛出 TypeError（例如 "Illegal invocation"、"ReadableStream is not defined" 或静默失败），且不会触发网络面板中的错误标记。

确认是否处于安全上下文

这是首要判断项。安全上下文要求页面必须满足以下任一条件：

协议为 https://（含有效证书）
协议为 localhost 或 127.0.0.1（现代浏览器默认信任，但部分旧版或严格策略下需显式启用）
协议为 file:// —— 不构成安全上下文，禁止 Stream API 使用
使用 http:// 访问非本地地址 —— 明确不被允许

可在控制台执行 self.isSecureContext 直接验证：返回 true 才具备基础资格。

Upload audio to AIOZ Stream

快速上传音频至 AIOZ Stream API。支持默认或自定义编码配置创建音频对象，上传文件并完成处理后返回音频链接。

下载

检查跨域响应是否携带可流式读取的头部

即便在安全上下文中，跨域响应也需满足额外约束才能启用流式读取：

Content-Type 必须是可解析类型（如 application/json、text/plain、application/octet-stream），且不能是浏览器强制缓冲的类型（如某些 video/* 在未声明 Accept-Ranges 时）
响应头中需包含 Access-Control-Expose-Headers: Content-Length, Content-Range, X-Total-Count 等（若需读取这些字段）
若使用 credentials: 'include'，服务端必须返回 Access-Control-Allow-Credentials: true，否则流读取可能被中断

验证 Stream API 是否实际可用

不要仅依赖 response.body 存在就认为可读。应主动尝试初始化 reader 并捕获异常：

fetch('https://api.example.com/stream', { 
  mode: 'cors',
  headers: { 'Accept': 'text/event-stream' }
})
.then(async response => {
  if (!response.body) throw new Error('No stream body');
<p>const reader = response.body.getReader(); // ← 此行最易抛出安全上下文相关 TypeError
let chunks = [];</p><p>while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
})
.catch(err => {
console.error('Stream init failed:', err.name, err.message);
// 常见报错：TypeError: Failed to execute 'getReader' on 'ReadableStream': 
//          Cannot construct a ReadableStream outside of a secure context.
});
</p>