CORS Issue with Microsoft Teams API on teams.cloud.microsoft

Question

I have a custom Microsoft Teams app running on https://teams.cloud.microsoft. The app makes a request to https://teams.microsoft.com/api/mt/apac/beta/users/.../mergedProfilePicturev2, but it's blocked by CORS:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at 'https://teams.microsoft.com/api/mt/apac/beta/users/29e1c0d3-cbf0-41c8-831e-0c282c072241/mergedProfilePicturev2?usersInfo=%5B%7B%22userId%22%3A%228%3Aorgid%3A04a0bfdb-8548-43eb-88c7-56f8b502cd04%22%2C%22displayName%22%3A%22Aakarsh%20Mishra%22%2C%22avatarETag%22%3A%22SignIn_1738732798404%22%7D%2C%7B%22userId%22%3A%228%3Aorgid%3A49aba31b-f629-4f79-9f64-ae5f7f39e7bd%22%2C%22displayName%22%3A%22Aayush%20Khurana%22%2C%22avatarETag%22%3A%22SignIn_1738732798404%22%7D%2C%7B%22userId%22%3A%228%3Aorgid%3Af2d7a26e-bf92-422e-b2f1-d2feb720b738%22%2C%22displayName%22%3A%22Abhinav%20Tyagi%22%2C%22avatarETag%22%3A%22SignIn_1738732798404%22%7D%5D&size=HR64x64' from origin 'https://teams.cloud.microsoft' has been blocked by CORS policy: 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.

There is no explicit CORS-related code in my solution. How can I correctly fetch profile pictures within a Teams app? Should I use Microsoft Graph API or another approach? Any guidance would be appreciated.

Answer 1

@Mahim Kumar - The CORS issue you're encountering is due to the fact that the endpoint https://teams.microsoft.com/api/mt/apac/beta/users/.../mergedProfilePicturev2 does not include the necessary Access-Control-Allow-Origin headers, which are required for cross-origin requests from your custom Teams app hosted on https://teams.cloud.microsoft.

To correctly fetch profile pictures within a Teams app, you should use the below Microsoft Graph API.
GET /users/{id | userPrincipalName}/photo/$value

Ref Doc: https://learn.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0&tabs=http#to-retrieve-the-profile-photo-of-a-user

Thanks, 

Nivedipa 

-----------------------------------------------------------------------------------------------------------

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.