I have a frontend application deployed on Azure Static Web Apps and a backend on Azure App Service (Node.js with Express) both followed the Autodesk Tandem React 2 legged example and worked in local. The frontend needs to communicate with the backend to access Autodesk APS API's, but I receive a CORS error when making the request in production:
Access to XMLHttpRequest at '' from origin '' 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.
Tried several ways of enabling CORS in the azure Appservice with no luck.
app.use(cors({ origin: ";, credentials: true }));
Should I use the Autodesk Tandem SDK in a frontend app? How to avoid CORS issues?
I have a frontend application deployed on Azure Static Web Apps and a backend on Azure App Service (Node.js with Express) both followed the Autodesk Tandem React 2 legged example and worked in local. The frontend needs to communicate with the backend to access Autodesk APS API's, but I receive a CORS error when making the request in production:
Access to XMLHttpRequest at 'https://tandem.autodesk/api/v1/groups' from origin 'https://my-static-web-app.azurestaticapps' 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.
Tried several ways of enabling CORS in the azure Appservice with no luck.
app.use(cors({ origin: "https://my-static-web-app.azurestaticapps", credentials: true }));
Should I use the Autodesk Tandem SDK in a frontend app? How to avoid CORS issues?
Share Improve this question asked Feb 17 at 17:54 Jesús RuizJesús Ruiz 1 New contributor Jesús Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2 |2 Answers
Reset to default 1you should use your backend as a proxy for making requests to the Autodesk Tandem API, especially if you are encountering CORS issues in production. Here's why:
CORS issues arise because the Autodesk Tandem API does not allow requests from your frontend origin directly. You can bypass this by configuring your backend (Node.js with Express) to make requests to the Autodesk API on behalf of the frontend. This way, your backend handles the CORS issue because it will not be blocked by the browser.
- Set up a route in your backend that listens for requests from the frontend.
- From the backend, make the request to Autodesk's API.
- Return the response from Autodesk back to your frontend.
The Tandem Viewer should be CORS enabled. Can you try following:
- clear your browser cache and try again.
- If there is any error - can you capture the request in developer console and share details (incl. request and response headers) with me, pls? My contact details are jan.liska at autodesk.
https://my-static-web-app.azurestaticapps
permission to access their site. Not the other way around! – Quentin Commented Feb 17 at 17:56