Microsoft teams incoming webhook CORS error

Copper Contributor

Hi there,

 

I've been trying to get my web app (javascript) to send a message to a microsoft teams channel. I went through the steps of the "getting-started" page and then referred to this tutorial: https://medium.com/@john_93626/automating-posts-to-microsoft-teams-using-javascript-2b5afeab1974 .

 

Problem is, whenever i try to send a Post request to my url (using axios or XMLHttpRequest), i got an error saying: Access to XMLHttpRequest at 'https://outlook.office.com/webhook/8857e17c-5ad9-4561-8970-180c05644bc4@0400011a-0b87-4500-ac8a-610b...' from origin 'http://localhost:3030' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

As you can see in my code below, i added the 'Access-Control-Allow-Origin' header to my request, but I still get the same error. 

 
Did this occur to anyone else as well? Or am I doing something wrong?
 
Help would be much appreciated,
Best regards,
Josch
4 Replies

@joschroth Could you please follow the guide here to Send Messages to Connectors and Webhooks.

Also could you please confirm if you have added actions in the Connector registration portal?

@Gousia_Begum Hi! Yeah I've followed the steps of the guide closely, problem is they only send the JSON via Curl or Postman, not through an Http post request. Whats the connector registration portal? Did you mean the dialog inside of teams where you can manage your connectors etc.?

 

Best regards,

Josch

Make sure you're using a native server and not React for example. So, a call from a basic ExpressJS app works but not if initiated from within React. That solved the issue for me

  

Just had the same issue, and got it working by using: https://www.npmjs.com/package/teams-web-send

 

see the docs:

  • Directly off the browser as a UMD
    <script src="https://unpkg.com/teams-web-send@0.1.1/dist/tws.umd.production.min.js"></script>
    <script>
    (() => {
    	const sendMessage = window.tws.bootstrap();
    	const message = `{"text": "Hello World"}`;
    	sendMessage('http://your.msteams.webhook.url', message).then(() => {
    		console.info('Message sent!')
    	});
    })();
    </script>

@farisdurrani425