JS触发Discord Webhook的HTTP请求不生效无报错问题求助

问题成因 #

• 表单默认提交行为未被阻止：你的send函数没有返回值，onsubmit="return send();"实际未阻止表单默认的页面刷新逻辑，异步的XMLHttpRequest还没完成发送就被页面刷新中断，自然没有效果也不会留下报错日志。
• 使用了Discord废弃的API域名：当前Discord Webhook的官方API域名已从discordapp.com切换为discord.com，旧域名的POST请求会触发重定向，XMLHttpRequest默认不会自动跟随POST请求的重定向，导致请求失败。
• 缺少请求状态监听：你没有给XMLHttpRequest绑定错误、完成回调，哪怕请求失败你也无法拿到对应的错误提示。
• 结构逻辑瑕疵：输入框放在form标签外部，用户按回车键触发提交时可能出现不符合预期的行为。

修复后完整代码 #

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>cHECKEN BOT</title>
        <link rel="icon" href="images/favicon.ico">
        <script>
            function send() {
                const content = document.getElementById("content").value.trim();
                // 空内容不提交，避免Discord返回400错误
                if (!content) return false;

                const request = new XMLHttpRequest();
                // 替换为新的Discord API域名
                request.open("POST", "https://discord.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");
                request.setRequestHeader('Content-type', 'application/json');
                
                // 添加状态监听方便后续排查问题
                request.onload = function() {
                    console.log('请求完成，状态码：', request.status);
                    console.log('返回内容：', request.responseText);
                }
                request.onerror = function() {
                    console.error('请求出错');
                }

                const params = {
                    username: "bruh",
                    avatar_url: "",
                    content: content
                }
                request.send(JSON.stringify(params));
                // 返回false阻止表单提交刷新
                return false;
            }
        </script>          
        <style>
            center {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            footer {
                position: absolute;
                width: 99%;
                bottom: 35px;
                text-align: center;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <center>
            talk to Q.U.A.C.K
            <form onsubmit="return send();">
                <!-- 输入框移到form内部 -->
                <br><input type="text" id="content">           
                <input type="submit" value="send">
            </form>
        </center>
        <footer><b><a href="/">home</a></b></footer>
    </body>
</html>

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