REST API calls from teams tab to backend server

skander basly 20

I'm currently developing a custom Teams tab app for Outlook using React and need to consume a REST API hosted on a server.

However, I'm encountering CORS (Cross-Origin Resource Sharing) issues when making GET or POST requests from my Teams app, as these requests are being blocked due to CORS restrictions associated with JavaScript.

Unfortunately, I cannot modify the CORS policies on the server side.

I'm looking for effective solutions or workarounds to enable successful API calls from my Teams app despite these limitations.

Sayali-MSFT 3,691 Reputation points Microsoft External Staff

2025-03-03T07:08:49.49+00:00

Hello skander basly, Thank you for your inquiry about your Teams app development issue! To assist you better, could you please provide the following details?

Reproduction Steps: Please share the steps you took to encounter the issue.

Documentation Links: Any specific documentation you followed that relates to your problem.

Code Snippets: Relevant code snippets that illustrate the issue.

This information will help us better understand the situation and provide a more accurate response.
skander basly 20 Reputation points

2025-03-03T16:22:55.4+00:00
Basically I am trying to do a simple fetch call from a JS file in the project anywhere from the app.

fetch('https://server-url-reject-request-cors.com') .then(response => response.json()) .then(json => console.log(json))

And I get an error:
tab:1 Access to fetch at 'https://server-url-reject-request-cors.com/' from origin 'https://localhost:53003' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I’m uncertain about the best approach to handle this situation. One option is to add a middleware server that facilitates communication between Outlook and the backend server. However, I would prefer to avoid this solution. I’ve also come across Azure Relay, which can act as an intermediary, but it is not free. This has left me a bit unsure of the optimal solution.
Sayali-MSFT 3,691 Reputation points Microsoft External Staff

2025-03-05T07:53:05.3066667+00:00
Hello skander basly, To address the CORS issue when making API calls from your Teams tab app, you have a few options. Since modifying the server-side CORS policies is not possible.

Azure API Management

Azure API Management can be used to create a managed API gateway that can handle CORS and other policies. This service is not free but provides advanced features for managing APIs.
Reference Document-https://learn.microsoft.com/en-us/azure/api-management/

Service Workers

Service Workers can be used to intercept network requests and handle them appropriately. This approach requires HTTPS and might be more complex to implement.
Reference Document-https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
skander basly 20 Reputation points

2025-03-06T14:43:02.59+00:00

For sure, I can use service worker to intercept a request, but I don't think that I can bypass CORS with this approach.
When I finally deploy the application to Azure, the app will be available within a unique URL that will never change? In that case, maybe we can add the URL to the CORS allowed URLs in the server.

Last question: The "api" folder in the teams app project is for dev server only? it will not be deployed with the app? or we need azure functions?
Sayali-MSFT 3,691 Reputation points Microsoft External Staff

2025-03-07T16:50:33.9366667+00:00
Hello skander basly, The "api" folder in a Teams app project typically contains server-side code that is used during development. This code is often run on a local development server to provide backend functionality for the app. However, when deploying your Teams app to production, you will need to deploy the server-side code to a suitable hosting environment, such as Azure Functions or another cloud service.

Development Server:

The "api" folder is used for running a local development server during the development phase.

It allows you to test and develop backend functionality locally.

Production Deployment:

The code in the "api" folder will not be automatically deployed with the Teams app.

You need to deploy the server-side code to a production environment, such as Azure Functions, Azure App Service, or another cloud service.

Share via

REST API calls from teams tab to backend server

Your answer