7Mind站点Tampermonkey自动登录脚本触发POST 404错误咨询

首先可以明确：该问题并非Chrome安全特性拦截导致，404是服务器返回的响应状态码，代表请求已经成功发送到服务器，但服务器未找到对应接口/未通过请求校验。

问题根因 #

• 脚本执行时机过早：默认Tampermonkey会在DOM加载完成前执行脚本，此时你获取的email、password元素可能不是登录页的有效输入框，赋值无效、提前点击按钮就会携带空参数发起登录请求，触发报错
• 前端框架状态未同步：该站点使用了React/Vue这类MVVM框架，直接修改DOM的value属性不会触发框架的表单状态更新，提交时框架会读取内部存储的空值发起请求，参数异常也会导致服务端返回404
• 接口路径可能已更新：站点迭代后登录接口路径可能发生变更，旧的/v1/login接口已下线

修复方案 #

1. 调整脚本执行规则与时机，限定只在登录页运行，确保DOM加载完成后再执行操作
2. 赋值后手动触发输入事件，同步框架内部状态
3. 先手动正常登录抓包确认当前有效登录接口路径，若接口确实变更可以直接调用新接口提交请求，无需模拟点击

修复后参考代码 #

// ==UserScript==
// @name         7Mind 自动登录脚本
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  7Mind 自动登录
// @author       You
// @match        https://app.7mind.de/login*
// @run-at       document-end
// ==/UserScript== 

// 等待元素加载完成再执行操作
function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(mutations => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
}

(async function() {
  const emailInput = await waitForElement('input[name="email"]');
  const pwdInput = await waitForElement('input[name="password"]');
  const submitBtn = await waitForElement('button[type="submit"]');

  // 赋值后触发input事件同步框架状态
  emailInput.value = "x@y";
  emailInput.dispatchEvent(new Event('input', { bubbles: true }));
  
  pwdInput.value = "pass";
  pwdInput.dispatchEvent(new Event('input', { bubbles: true }));

  // 延迟100ms再点击，确保状态同步完成
  setTimeout(() => submitBtn.click(), 100);
})();

如果修改后仍出现404，手动打开F12网络面板，正常输入账号密码登录，查看实际发起的登录请求路径、请求头、参数格式，和脚本触发的请求做对比，对应调整即可。

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