HTML无法加载响应数据NoDataFoundForResourceWithGivenIdentifier

hdxzd12 · 发表于 2024-8-4 15:57

现在有一个HTML文件，相关代码如下

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LRC文件加载器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <h2>LRC文件加载器</h2>
    <div id="lrcContent">
        <!-- 这里将显示LRC文件的内容 -->
    </div>

    <script>
        let lrcLines = []; // 用于存储解析后的LRC歌词数据
        let currentIndex = 0; // 当前歌词行索引

        // 获取URL中的LRC文件地址
        const urlParams = new URLSearchParams(window.location.search);
        const lrcFileUrl = urlParams.get('URL');

        // 加载并解析LRC文件内容
        if (lrcFileUrl) {
            fetch(lrcFileUrl)
                .then(response => response.text())
                .then(data => {
                    parseLrc(data); // 解析LRC文件内容
                    setInterval(displayCurrentLine, 500); // 每隔500ms更新显示当前时间的歌词
                })
                .catch(error => {
                    console.error('Error fetching LRC file:', error);
                    document.getElementById('lrcContent').innerText = 'Failed to load LRC file.';
                });
        } else {
            document.getElementById('lrcContent').innerText = 'No LRC file specified.';
        }

        // 解析LRC文件内容
        function parseLrc(data) {
            lrcLines = []; // 清空之前的歌词数据
            const lines = data.split('\n');
            lines.forEach(line => {
                const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
                if (match) {
                    const minutes = parseInt(match[1]);
                    const seconds = parseInt(match[2]);
                    const milliseconds = parseInt(match[3]);
                    const time = minutes * 60 + seconds + milliseconds / 1000;
                    const text = match[4].trim();
                    lrcLines.push({ time, text });
                }
            });
        }

        // 显示当前时间点的歌词内容
        function displayCurrentLine() {
            const audioElement = document.getElementById('audio'); // 如果有音频，可以获取当前播放时间
            let currentTime = audioElement ? audioElement.currentTime : 0; // 获取当前时间
            // 查找当前时间点对应的歌词行
            for (let i = 0; i < lrcLines.length - 1; i++) {
                if (currentTime >= lrcLines[i].time && currentTime < lrcLines[i + 1].time) {
                    currentIndex = i;
                    break;
                }
            }
            // 更新显示的歌词内容
            const lrcDiv = document.getElementById('lrcContent');
            lrcDiv.innerHTML = '<pre>' + escapeHtml(lrcLines[currentIndex].text) + '</pre>';
        }

        // 函数用于转义HTML特殊字符，避免XSS攻击
        function escapeHtml(unsafe) {
            return unsafe
                 .replace(/&/g, "&")
                 .replace(/</g, "<")
                 .replace(/>/g, ">")
                 .replace(/"/g, """)
                 .replace(/'/g, "'");
        }
    </script>
</body>
</html>

在使用时出现无法加载响应数据的情况
这种情况应该如何解决

我心飞翔1995 · 发表于 2024-8-4 18:02

niu666888 发表于 2024-8-4 17:50
给你问GPT

从你的描述和截图来看，问题可能出在LRC文件的URL或者文件本身。以下是一些可能的解决方法：
...

禁止使用ChatGPT或其他AI生成的答案解答问题

注意版规

mmffddyy · 发表于 2024-8-4 20:47

把后端代码也发过来啊，就给个前端怎么知道什么问题

爱飞的猫 · 发表于 2024-8-5 04:36

要看终端或 HTTP 请求头（标头）的提示。盲猜一个可能是请求被 CORS 规则阻挡了（域名不同等情况）。如果 lrc 文件的服务器不属于你，你需要起个后端转发资源请求。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

d199212 · 发表于 2024-8-5 08:22

看着请求错误了吧

hdxzd12 · 发表于 2024-8-5 09:48

mmffddyy 发表于 2024-8-4 20:47
把后端代码也发过来啊，就给个前端怎么知道什么问题

hdxzd12 · 发表于 2024-8-5 13:12

本来想看终端或 HTTP 请求头结果这个程序直接不去请求文件了。。。。。。。。。。。。。

帐号		自动登录	找回密码
密码			注册[Register]

[求助] HTML无法加载响应数据NoDataFoundForResourceWithGivenIdentifier