JavaScript fetch发起POST请求返回cancelled状态问题求助

前端页面中运行fetch发送POST请求时，请求持续返回cancelled状态，同一接口在Postman中可正常调用，先后尝试两种代码写法均未成功。

第一种实现代码：

window.post = function(url, data) {
    return fetch(url, {
        method: "POST",
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    });
}

post(url, {"rblxtoken": document.getElementById('cookie').value});

问题现象截图：

第二种尝试的等效实现代码：

let data = {
     "rblxtoken": document.getElementById('cookie').value
}

fetch(url, {
     method: 'POST',
     headers: {
        'Content-Type': 'text/plain'
     },
     body: `{\n    "rblxtoken": 
     "${document.getElementById('cookie').value}"\n}`
});

• 优先排查CORS跨域限制
  Postman不受浏览器同源策略约束，因此可以正常调用接口，但前端页面运行在浏览器环境中会受同源策略校验。如果接口未配置正确的CORS响应头（包括未匹配当前页面域名的Access-Control-Allow-Origin、未允许POST请求方法、未放行对应Content-Type请求头），浏览器会在OPTIONS预检请求阶段直接拦截请求，最终表现为cancelled状态。
  验证方式：打开浏览器开发者工具-网络面板，筛选查看是否存在对应接口的OPTIONS请求，检查该请求的响应状态是否为2xx、响应头是否包含合法的CORS字段。
  解决方式：协调后端为接口配置正确的CORS规则，放行当前页面所在源的访问权限，同时允许POST方法和代码中用到的application/json请求头。
• 排查页面主动中断请求的场景
  如果请求发送后立刻触发了页面刷新、跳转、单页应用路由切换、组件卸载，浏览器会直接终止未完成的请求，状态显示为cancelled。
  验证方式：检查请求触发逻辑是否绑定在表单默认提交事件上、是否在请求发出后立刻执行了页面跳转/路由切换代码、是否在组件卸载生命周期中主动终止了请求。
  解决方式：表单提交场景下在事件回调中调用e.preventDefault()阻止默认刷新行为；将跳转、路由切换逻辑放到请求响应回调之后执行。
• 排查外部拦截逻辑
  广告拦截、安全防护类浏览器插件可能会拦截包含token、敏感cookie字段的请求；项目中全局配置的请求拦截器如果主动调用abort()方法，也会终止请求。
  验证方式：打开浏览器无痕模式（默认禁用所有扩展）重新操作复现，排除插件影响；全局搜索项目中是否存在fetch拦截、请求终止的相关逻辑。
• 排查参数与地址配置错误
  检查代码中url变量是否为带协议的完整合法地址，避免相对路径拼接错误、协议缺失导致请求地址无效；另外第二种写法将Content-Type改为text/plain，如果后端预期接收JSON格式，会出现参数解析失败，这类问题通常返回4xx状态码，可在网络面板查看响应详情进一步确认。

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