This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(25.6, 80%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EB%3C/text%3E%3C/svg%3E)
I hosted a React App on Azure but it is unable to fetch data from the API. I've also hosted the SQL database on Azure SQL backend and changed the connection strings on the Web App to match it. Why is the React App still unable to fetch data?
Failed to load resource: net::ERR_CONNECTION_REFUSED: https://freeimage.host/i/h7iI2f
WeatherForecastcontroller API is able to fetch data from hardcoded array: https://freeimage.host/i/h7i91a
This is my Fetch API source URI saved in .env file: https://freeimage.host/i/h7iOEg
https://onboarding2.azurewebsites.net/api/customers
Postman is returning data from API: https://freeimage.host/i/h7ssDB
Your client app is calling localhost and it won't work.
Please set the correct value for this environment variable. In your case: it's https://onboarding2.azurewebsites.net/api/
Well, my environment variable is already set to REACT_APP_API=https://onboarding2.azurewebsites.net/api
If you see at the top bar of visual studio, there's a .env tab and within it, I have already set it to https://onboarding2.azurewebsites.net/api/
The full Fetch URI is the combination of process.env.REACT_APP_API + 'customers' as shown in the Customer.js tab.
Can you stream the logs in Azure, and check what the environment variable value is: Stream Logs. Because in the first screen shot, it's still picking up localhost
Just to note that the app hosted on Azure is an ASP.NET Core 5.0.17 (Controller) with built in React SPA.
Does Console.log() log to the console on Azure?
I've added console.log(process.env.REACT_APP_API) to componentDidMount() section but it doesn't seem to be logging to Azure.
Inspecting the app via ChromeDevTools on azurewebsites.net also doesn't show any values.
App Service Logs Settings: https://freeimage.host/i/hVs4qJ
Fetch API Not Console Logging : https://freeimage.host/i/hVsaUl
Streaming Logs(no environment variables): https://freeimage.host/i/hViwut
you need to console.log()
Fetch is now logging on ChromeDevTools: https://freeimage.host/i/hNUyx9
Output: TATA/ + process.env.REACT_APP_API
Thank you to whoever solved this on Azure.
Glad all is working!