When using Blazor WebAssembly with Azure Function in "local mode" accessed via Http.GetStringAsync using IP I get an "Failed to fetch error"

user_13556844 0
Viewed 733

I'm working on a local dev config using:

  • Azure Function via a local func emulator from visual studio
  • Accessed via Blazor WebAssembly (via local IIS express).

The goal is to develop an WebAssembly App using Azure Function emulator in a local dev config, without having to publish each time on azure to make a test...

When I try to access a dummy function from the blazor app using http.GetStringAsync() method , I'm facing a problem when accessing the func emulator via the IP address, like these explanations :

  1. when call from the blazor app using localhost like

    Http.GetStringAsync("http://localhost:7071/api/HelloEcho") => localhost , it works, I got a response

  2. when accessing the func api from a Chrome or Edge client using the localhost or IP adress, like typing this in browser or from a remote device :

    http://localhost:7071/api/HelloEcho    => it works 

http://xxx.xxx.xxx.xxx:7071/api/HelloEcho    => remote, it works

I even try taping it http://xxx.xxx.xxx.xxx:7071/api/HelloEcho in a safari browser on my phone connected on the same network ==> it works , I get a response.

  1. but when I'm trying to access it replacing the localhost by its IP from the blazor app like this Http.GetStringAsync("http://xxx.xxx.xxx.xxx:7071/api/HelloEcho") => i got an error message

WebAssembly.JSException: TypeError: Failed to fetch at System.Net.Http.WebAssemblyHttpHandler.doFetch

If it works in a browser, why not using an http.Get in the app ? and what can I do to make it working ?

NB : in the function host, added parameters for CORS : *

Visual studio Version 16.6.0 Preview 6.0

Azure Functions Core Tools (3.0.2534 Commit hash: bc1e9efa8fa78dd1a138dd1ac1ebef97aac8d78e) Function Runtime Version: 3.0.13353.0

WebAssembly 3.2.0-rc1.20223.4

webassembly blazor
2 Answers

To test app you do not need IIS, you can run both function app and blazor app using ctrl + F5 and it will work well. I do so and had not any problems yet. Do you really need IIS, why?

user_43982110

Mixed content errors occur when your page is loaded over HTTPS, but your asynchronous requests attempt to communicate over HTTP. This is considered as a security risk

To resolve the issue, your can either "upgrade" both resources to HTTPS, or you can "downgrade" both to HTTP.

Rather than attempting to set up a certificate for an ip address, the use of a HOSTS file can allow you to create test dns entries, which allows you to avoid both ip addresses and port number entry altogether.

user_1461360
Related