I'm working with a React frontend hosted on Azure Static Web Apps, and I'm trying to call an Azure Function that performs long-running tasks. While the function itself continues to run properly, the frontend is timing out, resulting in this CORS error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource ... (Reason: CORS header 'Access-Control-Allow-Origin' missing). Status code: 502." I've set up CORS correctly to allow requests from my frontend, and shorter requests go through without any problems. Has anyone else dealt with this issue, and do you have any solutions?
2 Answers
It looks like the issue might be related to timeout settings on Azure. I believe the app gateway can timeout requests that take longer than 240 seconds. You might want to check the Azure documentation on request timeouts. If that’s the case, you could consider using Azure Functions durable tasks or web jobs to handle those longer processes without your frontend timing out. It’s a common challenge when working with long-running requests.
Honestly, trying to manage long-running tasks in a synchronous manner can lead to lots of problems. You might want to rethink how you structure your calls. Have you thought about breaking the process into smaller chunks or running it asynchronously with notifications for completion? That could save you from CORS issues and timeouts entirely!
Who said I’m managing it synchronously?
Wait, really? That sounds like a strange limitation. I’ve worked with other providers and never faced a timeout on the frontend like that. I’ll definitely explore web jobs as you suggested, but I hope it’s not too complicated!