HTML中Fetch结合Onclick回调调用接口出现404错误的排查请求

核心错误点及修复方案 #

1. 页面访问方式错误导致404 #

如果直接双击打开本地HTML文件，表单的action='/result'会指向file:///result（本地不存在的路径），触发404。必须通过后端服务的http://127.0.0.1:8081/访问页面，此时表单的相对路径/result才会指向正确的后端接口。

2. 按钮默认行为触发重复请求 #

Run按钮在<form>标签内，默认是提交按钮，点击时会同时触发GetData()和表单的默认提交行为，导致请求冲突。需阻止默认行为：

<button onclick="event.preventDefault(); GetData();">Run</button>

或在函数内处理：

async function GetData(event) {
    event.preventDefault(); // 阻止表单默认提交
    // 后续请求逻辑
}

3. Fetch请求未携带编辑器内容，且响应处理错误 #

• CodeMirror编辑器内容不会自动同步到原始textarea，需手动获取：editor.getValue()
• 后端期望接收表单格式数据，需构造FormData传递参数
• 后端返回的是纯文本，不能用response.json()解析，应改用response.text()

修复后的GetData函数：

async function GetData(event) {
    event.preventDefault();
    const editorContent = editor.getValue();
    const formData = new FormData();
    formData.append('name', editorContent);

    fetch("http://127.0.0.1:8081/result", { 
        method: "POST",
        body: formData
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        return response.text();
    })
    .then((responseText) => {
        document.getElementById("outputText").value = responseText;
    })
    .catch((error) => {
        document.getElementById("outputText").value = "请求错误: " + error.message;
    })
}

4. 可选优化：移除不必要的表单和iframe #

既然用Fetch处理请求，无需保留<form>和隐藏iframe，直接保留编辑器和按钮即可：

<textarea id="editor" name="name"></textarea>
<button onclick="event.preventDefault(); GetData();">Run</button>

完整修复后的前端代码片段 #

<!doctype html>
<html>
<head>
    <title>Online Strategy</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="codemirror/lib/codemirror.css">
    <script src="codemirror/lib/codemirror.js"></script>
    <script src="codemirror/addon/mode/simple.js"></script>
    <script src="codemirror/mode/rust/rust.js"></script>
    <link rel="stylesheet" href="codemirror/theme/dracula.css">
</head>
<body>
    <textarea id="editor" name="name"></textarea>
    <button onclick="event.preventDefault(); GetData();">Run</button>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
            lineNumbers: true,
            lineWrapping: true,
            indentUnit: 2,
            tabsize: 2,
            indentWithTabs: 1,
            mode: "rust",
            theme: "dracula",
        });
        editor.setSize(700, 700);

        async function GetData(event) {
            event.preventDefault();
            const editorContent = editor.getValue();
            const formData = new FormData();
            formData.append('name', editorContent);

            fetch("http://127.0.0.1:8081/result", { 
                method: "POST",
                body: formData
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`请求失败，状态码: ${response.status}`);
                }
                return response.text();
            })
            .then((responseText) => {
                document.getElementById("outputText").value = responseText;
            })
            .catch((error) => {
                document.getElementById("outputText").value = "请求错误: " + error.message;
            })
        }
    </script>

    <h3>INPUT</h3>
    <textarea id="inputText" placeholder="input" cols="70" rows="10" wrap="on"></textarea>
    <button onclick="MakeUpper()">Enter</button>
    <h3>OUTPUT</h3>
    <textarea id="outputText" placeholder="output" cols="70" rows="10" wrap="on" readonly></textarea>
    <script>
        function MakeUpper() {
            var upperCase = document.getElementById("inputText").value;
            var upperCase = upperCase.toUpperCase();
            document.getElementById("outputText").value = upperCase;
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者dfadfdff