Microsoft 团队 WebHook 抛出 "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Question

当用户在我的 Vue.js 应用程序中提交错误但我遇到 CORS 错误时，我正在尝试使用 Microsoft Teams WebHook 发送通知...

这是我的代码：

const webhookUrl =
          "https://outlook.office.com/webhook/XXX";
        const card = {
          "@type": "MessageCard",
          "@context": "https://schema.org/extensions",
          summary: "New bug",
          sections: [
            {
              activityTitle: "A <b>bug</b> has been submitted!",
            },
            {
              title: "Details:",
              facts: [
                {
                  name: "Name",
                  value: this.bug.author,
                },
                {
                  name: "Description",
                  value: this.bug.content,
                },
              ],
            },
          ],
        };

        Axios.post(webhookUrl, card, {
          headers: {
            Accept: "application/json",
            "content-type":
              "application/vnd.microsoft.teams.card.o365connector",
          },
        })
          .then(() => {
            this.$toasted.succes("Thanks for helping us !");
          })
          .catch((e) => {
            console.log(e);
            this.$toasted.error(
              "There was an error while trying to submit your bug"
            );
          });

其中“XXX”是我的 WebHook 代码，它在使用 Postman 执行 POST 请求时完美运行..

在此先感谢您的帮助！

Answer 1

我不知道为 Teams webhook 设置了哪些允许的来源，但我并不惊讶它不允许直接从您自己的网页直接发布到 webhook。最好的方法是从您自己的 API 中调用 webhook 本身。如果您已经为此 Web 应用准备好了一个，只需添加一个调用 Teams webhook 的功能即可。如果您没有现有的 API，则需要添加一个，但它在几乎所有 Web 框架中都非常简单。

Microsoft 团队 WebHook 抛出 "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Microsoft teams WebHook throw "No 'Access-Control-Allow-Origin' header is present on the requested resource."

javascript

webhooks

microsoft-teams