Share via

Unable to access Azure Digital Twin End-points from our React app

Suraj K M 20 Reputation points
2025-05-28T04:28:09.2833333+00:00

Hi,

We’re currently building a custom web application using React, and we’re aiming to use Azure Digital Twins (ADT) as the core IoT data source. Instead of setting up a custom backend service to consume events from an Event Hub or building a separate API layer, we want the React app to query the existing ADT REST API endpoints directly.

However, we're running into CORS issues when trying to fetch data from endpoints like:

https://<your-instance>.api.<region>.digitaltwins.azure.net/digitaltwins/{id}?api-version=2020-10-31

The browser throws the following error:

Access to fetch at 'https://euwdsrg03radt01.api.weu.digitaltwins.azure.net//digitaltwins/Lsrengrv?api-version=2020-10-31' from origin 'http://localhost:5173' 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.

From what I’ve gathered, ADT does not support configuring CORS, which makes direct frontend access impossible.

Our Question:

Is there any supported or alternative way to safely access ADT REST endpoints from a browser-based client like React without building a backend proxy service?

We would really prefer to avoid a full backend layer just for this purpose, especially since our goal is to visualize live Digital Twins data in a lightweight SPA.

Any guidance, even if it's an Azure-supported pattern or tool recommendation (e.g., using an Azure Function with CORS enabled), would be appreciated.

Thanks in advance!

Azure Digital Twins
Azure Digital Twins
An Azure platform that is used to create digital representations of real-world things, places, business processes, and people.
Accepted answer
  1. VSawhney 880 Reputation points Microsoft External Staff Moderator
    2025-05-28T06:08:17.19+00:00

    Hello Suraj K M,

    I see you're having some trouble accessing Azure Digital Twin endpoints directly from your React app due to CORS issues. Unfortunately, Azure Digital Twins doesn’t currently support CORS, which is why you're experiencing this blockage when trying to connect from your frontend.

    Since you mentioned that you've created a Node.js app and are able to obtain the Auth Token and fetch API responses from ADT endpoints, deploying this backend alongside your React app on Azure is a solid plan. You can have your React application interact with your Node.js backend, which then communicates with the Azure Digital Twins service.

    Here are a couple of ways you might want to proceed:

    1. Build a Node.js Proxy: Use your Node.js application as a middleware to handle requests to Azure Digital Twins. This allows you to:
      • Fetch the data from Azure Digital Twins in your Node.js app.
      • Send that data back to your React app, thus avoiding CORS issues.
    2. Azure Functions: If you're looking for a lightweight serverless option, consider using Azure Functions. You can create an HTTP-triggered function that acts as a proxy to your Azure Digital Twins requests. Azure Functions can have CORS enabled, allowing your React app to communicate without issues.
    3. API Management: Implement Azure API Management to handle requests and integrate CORS policies. This method can manage and secure your backend services while providing a unified endpoint for your React application.

    Regarding potential blockers after deployment:

    • Ensure that your Node.js app is set up correctly to handle the authentication flow and token management for the Azure Digital Twins API.
    • Double-check that the permissions for your Microsoft Entra app registration are correctly configured with the appropriate roles to access Digital Twins.
    • Make sure that any dependencies required for your Node.js app are included and correctly configured in your Azure environment.

    Hope this helps!
    Thank you!

    1 person found this answer helpful.
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.