fix(音频消息): 优化音频URL检测逻辑避免CORS问题

修改音频URL检测逻辑,对于阿里云OSS等外部资源直接返回true,避免fetch HEAD请求触发CORS问题。同时调整crossOrigin设置策略,仅在需要访问音频数据时设置该属性。移除了冗余的备用播放方案,简化错误处理流程。
This commit is contained in:
超级老白兔
2025-09-10 11:52:37 +08:00
parent bc34346301
commit 2bcaadbeb6

View File

@@ -35,13 +35,20 @@ const parseAudioUrl = (audioUrl: string): AudioData => {
};
};
// 测试音频URL是否可访问
// 测试音频URL是否可访问避免CORS问题
const testAudioUrl = async (url: string): Promise<boolean> => {
try {
// 对于阿里云OSS等外部资源直接返回true让Audio对象自己处理
// 避免fetch HEAD请求触发CORS问题
if (url.includes(".aliyuncs.com") || url.includes("oss-")) {
return true;
}
const response = await fetch(url, { method: "HEAD" });
return response.ok;
} catch (error) {
return false;
// 如果fetch失败可能是CORS问题返回true让Audio对象尝试加载
return true;
}
};
@@ -88,8 +95,14 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
const newAudio = new Audio();
// 设置跨域属性
newAudio.crossOrigin = "anonymous";
// 对于阿里云OSS等外部资源不设置crossOrigin避免CORS问题
// 只有在需要访问音频数据时才设置crossOrigin
if (
!actualAudioUrl.includes(".aliyuncs.com") &&
!actualAudioUrl.includes("oss-")
) {
newAudio.crossOrigin = "anonymous";
}
newAudio.preload = "metadata";
audioRefs.current[audioId] = newAudio;
@@ -120,37 +133,9 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
await newAudio.play();
setPlayingAudioId(audioId);
} catch (error) {
// 尝试备用方案不设置crossOrigin
try {
const fallbackAudio = new Audio(actualAudioUrl);
audioRefs.current[audioId] = fallbackAudio;
// 重新绑定事件监听器
fallbackAudio.addEventListener("timeupdate", () => {
const currentProgress =
(fallbackAudio.currentTime / fallbackAudio.duration) * 100;
setAudioProgress(prev => ({
...prev,
[audioId]: currentProgress,
}));
});
fallbackAudio.addEventListener("ended", () => {
setPlayingAudioId(null);
setAudioProgress(prev => ({ ...prev, [audioId]: 0 }));
});
fallbackAudio.addEventListener("error", e => {
setPlayingAudioId(null);
setAudioError("音频播放失败,请稍后重试");
});
await fallbackAudio.play();
setPlayingAudioId(audioId);
} catch (fallbackError) {
setPlayingAudioId(null);
setAudioError("音频播放失败,请检查音频格式或网络连接");
}
setPlayingAudioId(null);
setAudioError("音频播放失败,请检查音频格式或网络连接");
console.error("音频播放错误:", error);
}
} else {
if (isPlaying) {