使用XMLHttpRequest触发Discord Webhook时sendMessage未执行问题求助

可能的问题原因及排查方案 #

• 跨域资源共享(CORS)限制
  你在浏览器控制台直接调用时，大概率是在Discord官网的页面控制台操作，属于同域请求自然能正常发送。但在你自己的项目域名下发起对discord.com的POST请求属于跨域操作，Discord的webhook接口默认不允许第三方前端站点直接调用，会被浏览器的跨域策略拦截。
• 内容安全策略(CSP)拦截
  如果你的项目配置了CSP规则，未将discord.com加入允许的请求目标域名，请求会直接被CSP策略阻止。
• 异步请求被中断
  XMLHttpRequest是异步请求，如果调用sendMessage()后立刻发生页面跳转、组件卸载、页面刷新等操作，请求还没完成发送就会被强制中断。
• 作用域或函数覆盖问题
  检查项目中是否存在重名的sendMessage函数覆盖了你的实现，或者调用位置不在当前sendMessage的作用域范围内，导致实际没有执行你写的这段逻辑。
• 参数序列化异常
  如果后续嵌入了动态生成的内容，可能存在特殊字符导致JSON.stringify(params)执行出错，请求无法正常发出。

排查步骤 #

1. 在sendMessage函数第一行添加console.log('函数执行')，确认函数是否被实际调用
2. 给XMLHttpRequest添加状态回调，打印请求状态和报错信息：

function sendMessage() {
  var request = new XMLHttpRequest();
  // 新增回调代码
  request.onerror = function(err) {
    console.error('请求报错：', err)
  }
  request.onload = function() {
    console.log('请求返回：', request.status, request.responseText)
  }
  // 原有逻辑不变
  request.open("POST", "https://discord.com/api/webhooks/XYZ");
  request.setRequestHeader('Content-type', 'application/json');
  // 剩余原有代码...
}

3. 打开浏览器开发者工具的「网络」面板，筛选XHR请求，查看是否有发往Discord webhook地址的请求，以及对应的状态码、拦截提示。

最佳实践 #

Discord官方不推荐在前端直接调用webhook，暴露的webhook地址很容易被恶意人员盗用刷消息。跨域问题建议通过你的后端服务转发请求解决，前端只调用你自己的后端接口，由后端发起对Discord webhook的请求。

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