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

Question

I'm trying to use Microsoft Teams WebHook to send notification when an user submit a bug within my Vue.js application but I'm having a CORS error...

Here is my code :

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"
            );
          });

Where "XXX" is my WebHook code, it works perfectly when performing a POST request with Postman..

Thanks in advance for your help !

score 0 · Accepted Answer · answered Dec 18 '20 at 12:12

I don't know offhand what allowed origins are set for Teams webhooks, but I'm not surprised it doesn't allow direct posting from your own webpage, straight to the webhook directly. The best approach for this is to call the webhook itself from within your own API. If you have one already in place for this web app, just add a capability to call the Teams webhook. If you don't have an existing API, you'd need to add one, but it's quite straighforward in pretty much all web frameworks.

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

1 Answers1