HTML输入URL时JSON格式POST请求无法发往Node.js服务端排查

• 扫描按钮放在<form>标签内部，没有显式设置type属性，浏览器默认将其识别为提交按钮（type="submit"），点击时会触发表单原生的提交跳转行为
• 输入框设置了type="url"+required属性，浏览器自带表单校验逻辑会导致两种完全不同的表现：
  • 输入非URL格式字符串时，表单内置校验不通过，默认提交行为被浏览器拦截，绑定在按钮click事件上的AJAX发送逻辑不受影响，可以正常运行
  • 输入符合格式规范的URL时，表单校验直接通过，点击按钮后立刻触发原生表单提交、页面刷新/跳转，send函数里初始化的XMLHttpRequest还没完成发送，就被页面卸载流程强制中断，所以后端完全收不到请求

二选一即可：

1. 拦截按钮点击的默认行为，修改前端JS的send函数，传入事件对象调用阻止默认行为的方法：

document.getElementById("scanner-button").addEventListener("click", send);

function send(e){
    // 阻断表单默认提交跳转
    e.preventDefault();
    var pageURL = document.getElementById('scanner-input').value;
    console.log(pageURL)
    let infos = {
        url : pageURL,
        vulnerable : false,
        report : ""
    };

    let request = new XMLHttpRequest();
    request.open("POST", "http://localhost:3000/send", true);
    request.setRequestHeader('Content-Type', 'application/json');
    console.log(infos)
    let data = JSON.stringify(infos);
    request.send(data)
}

2. 直接给按钮显式声明为普通按钮类型，从根源上避免触发表单提交，修改HTML中的按钮标签：

<button type="button" id="scanner-button">Scan</button>

额外注意：你贴的Node.js接口代码没有给前端返回响应的逻辑，就算请求正常送达，前端请求也会一直处于挂起状态直到超时，记得补充res.send()/res.json()之类的响应返回代码。

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