Azure Static Web App function API refusing connection from web app

Question

I have a Blazor WASM app deployed to an Azure Static Web app with a managed .NET 8 isolated Azure Function API. When calling the API directly from Postman using the auto-generated web app URL + the API route I receive the expected response and can see a log in Application Insights. However when I call the same endpoint from within the deployed WASM application I receive an net::ERR_CONNECTION_REFUSED response and a request isn't recorded in Application Insights. I have confirmed that this is functioning as expected locally.

Answer 1

Hello Beau

There are two things you can check.

1. This could be a CORS issue. Use online tools like test-cors.org to check if your API supports CORS requests. This tool allows you to send CORS requests to a remote server or a test server and provides feedback on whether CORS is functioning as expected. Here’s how you can use it: Visit test-cors.org. Enter your Azure Function API URL (e.g., the auto-generated web app URL + API route). Click the “Send CORS Request” button. Inspect the response to see if the necessary CORS headers are present.
2. The CORS can be set up in your host.json.
3. Check the logs of the Azure function and see if the requests are accepted in the first place. Are you also using the function keys in your request?
4. You can check if this is a CORS issue adding the following code to your Azure Function API's Startup.cs file:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 
{ 
	// ... 
	app.UseCors(builder => { builder.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod(); }); 
	// ... 
}   

1. Another possible reason for this issue could be that your Azure Function API is not deployed correctly. You can check if this is the case by navigating to your Azure Function API's URL in a web browser. If you receive an error message, then your Azure Function API is not deployed correctly.

Answer 2

@Beau I agree with Pinaki that you should start with CORS.

If you have confirmed that CORS is not the issue, you can check the logs of your Azure Function app to see if there are any errors or exceptions being thrown. To do this, you can follow these steps:

1. Open your Azure Function app in the Azure portal.
2. Go to the "Functions" tab and select the function that you are calling from your Blazor WASM app.
3. Click on the "Logs" tab to view the logs for that function.
4. Try calling the function from your Blazor WASM app again and see if any errors or exceptions are logged.

If you see any errors or exceptions in the logs, you can use that information to troubleshoot the issue further. For example, if you see an error related to authentication or authorization, you may need to update the authentication settings for your Azure Function app.

You can also try debugging your Blazor WASM app to see if there are any issues with the way you are calling the API. To do this, you can use the browser's developer tools to inspect the network requests being made by your app. You can also add logging statements to your Blazor WASM app to help you identify any issues with the way you are calling the API.

Let us know the outcomes of the above. We look forward to your reply.

Answer 3

the point of static web apps is the ability to call the proxied api without CORS. My guess is somehow the url is not correct. use the browsers network debug tools to see the actual url, post data and response.