access to azure storage from React App

Question

Hello,

We are running a REACT app on an APP service. The APP has a BACK END in TS and a front end in REACT. In our application our customers can create posts with images. These images must be saved in a blob container.

I cannot find the best solution to authorize my front end to save these images in the container.

I have created an application registration and use "ClientSecretCredential" with "BlobServiceClient" but i receved the error :

"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."

Can you please help me to find the best solution.

Best regard

Answer 1

Hi @Emmanuel de Nicolay

I found a couple of solutions that can help you:

• https://stackoverflow.com/questions/74389940/how-to-get-azure-blob-storage-data-into-react-app-that-is-hosted-on-azure-app-se
• https://dev.to/425show/connecting-to-azure-blob-storage-from-react-using-azure-identity-16l0

I hope this helps!

Remember to accept the answer if it is helpful.

Answer 2

Hello Emmanuel de Nicolay,

Greetings! Welcome to Microsoft Q&A Platform.

I understand that you’re encountering a common issue with Cross-Origin Resource Sharing (CORS) when trying to upload images directly from your React frontend to Azure Blob Storage.

The error message - "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."

This typically happens when a web application tries to make a request to a different domain, and the server doesn’t allow it due to security policies. To resolve it please enable the CROS policy and the specific domain into Allow origin list of the server.

Please consider checking below factors to resolve the issue,

1. Enable CORS options to add "Access-Control-Allow-Origin": "*" header to your response. Don't add authenticator to Options resources.
2. For best practice, if you add these headers to your response, you don't need to override the browser settings.
3. "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Credentials": true
4. check your request url/endpoint to be sure is ok.
5. Access-Control-Allow-Origin is a CORS (cross-origin resource sharing) header.

the CORS configuration must be done on the server handling the request, not on the requester. refer article.

• Ensure the server includes the Access-Control-Allow-Origin header in its response. This allows any domain to access the resource. For more restrictive access, specify the allowed domain.
• If you don’t have control over the server, you can use a proxy server to make the request on your behalf. This way, the request appears to come from the same origin.
• There are browser extensions available that can help bypass CORS policies during development. However, this is not recommended for production environments due to security risks.
• Configure Cross-Origin Resource Sharing (CORS) to allow your React app to interact with the Azure Blob Storage service. This involves setting the appropriate CORS rules in the Azure portal refer - https://learn.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

Similar thread for reference - https://learn.microsoft.com/en-us/answers/questions/499977/error-fetching-data-from-asp-net-in-reactjs, https://stackoverflow.com/questions/31276220/cors-header-access-control-allow-origin-missing.

Hope this answer helps! Please let us know if you have any further queries. I’m happy to assist you further.

---

Please "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.