Azure Static Web App function API refusing connection from web app

Beau 0 Reputation points
2024-03-10T19:43:13.2+00:00

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.

Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
5,069 questions
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,904 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,593 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
955 questions
0 comments No comments
{count} votes

4 answers

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more

  2. Pinaki Ghatak 4,535 Reputation points Microsoft Employee
    2024-03-11T13:37:18.48+00:00

    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.
    0 comments No comments

  3. brtrach-MSFT 16,506 Reputation points Microsoft Employee
    2024-03-12T03:53:58.1233333+00:00

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

    0 comments No comments

  4. Bruce (SqlWork.com) 66,056 Reputation points
    2024-04-29T16:08:17.1466667+00:00

    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.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.