Can't reach my nodejs azure app service api from my angular azure static web app. Got a 404 in the browser's console.

Question

Can't reach my nodejs azure app service api from my angular azure static web app. Got a 404 in the browser's console. The url stated in the console's error message has this form: "url-static-web-app/url-app-service/route". The "url-static-web-app" is concatenated by azure.

This is the code I use to make the call:

 this.httpClient.get<ILog[]>(`url-app-service/logs`)

What is wrong? I already tested that the nodejs app service is up and running by making requests with postman. I thought maybe I cannot chose my own backend since I use the student subscription.

Answer 1

Apologies for the delay. Based on my understanding of your issue, typically, the error message you're seeing in the browser's console indicates that the URL being used to make the API call is incorrect it's possible that the URL is not being constructed correctly in your Angular app.

Are you referring to this doc for the steps?  As mentioned in the doc - when you link your Azure App Service web app to your static web app, any requests to your static web app with a route that starts with /api are proxied to the same route on the Azure App Service.

If you haven’t tried, just to isolate - try "https://<app-service-name>.azurewebsites.net/api/logs". Replace <app-service-name> with the name of your Azure App Service.

this.httpClient.get<ILog[]>(https://<app-service-name>.azurewebsites.net/api/logs)

 

Also, verify that your Node.js API is configured to accept requests from your Azure Static Web App. You can do this by checking the CORS settings in your Node.js app.

Regarding your concern about using your own backend with a student subscription, there are no restrictions on using your own backend with a student subscription. However, there are some limitations on the resources that are available to you with a student subscription. You may check the Azure for Students FAQ for more information on these limitations.

Please let us know, I'll follow-up with you further.