Unable to fetch backend data in frontend application(I am getting CORS error Issue React.js

Question

I have created a three-tier architecture:

1. frontend using React
2. backend using Python
3. Neo4j database

I want to deploy all three of them to the Azure cloud platform, but while I am deploying them, I am getting a 404 Not Found error. I have a deployed backend with database in an Azure virtual machine, and I get the IP address of that VM and put it in the frontend code for fetching data from the frontend, which I deployed in an Azure app service. When I enter the IP address of the app service, I receive a 404 not found error. Note: This is all going well in the local machine. thanks in advance!

I am expecting CORS as a solution for hitting HTTP instead of HTTPS.

Answer 1

It seems like you are facing a Cross-Origin Resource Sharing (CORS) issue. CORS is a security feature implemented by web browsers that blocks requests from one domain to another domain. In your case, the frontend deployed in Azure App Service is trying to access the backend deployed in an Azure virtual machine, which is a different domain.

To resolve this issue, you need to enable CORS in your backend. You can do this by adding the following header in your response:

Access-Control-Allow-Origin: *

This header allows requests from any domain. If you want to allow requests from a specific domain, you can replace the asterisk with the domain name.

You can also enable CORS in Azure App Service by using the Azure CLI. You can follow the steps mentioned in the tutorial "Host RESTful API with CORS" to enable CORS in Azure App Service.

Please let us know if you have further questions or concerns.