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

Question

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

这是我的代码：

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本身。如果你已经为这个网络应用程序准备了一个，只需添加一个调用Teams webhook的功能。如果你没有一个现有的API，你需要添加一个，但它在几乎所有的web框架中都非常突出。