Blazor WASM - Breakpoints not firing on Client side code - after changing app from HTTPS to HTTP

Robert Salasidis 131

I created the Blazor WASM application in SSL, but then realized that there is no way to mix any API queries with http (they must all be https)

Unfortunately, the application needs to talk to some IOT devices that can only work with http, and there is no way to upgrade them to use https

I then changed the application to http by

commenting out in Server program.cs

//app.UseHttpsRedirection();

//app.UseHsts();

I also removed the https URLs from the launchSettings.json files in both the client and the Server.

In the same files, I also renamed https to http under profiles

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:3898",
      "sslPort": 44322
    }
  },
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Now, the application launches in http, and the IOT device communicates OK, however, I am not able to do client side debugging of the @code page I did a Clean Build and a rebuild to no effect.

Any ideas?

Robert Salasidis 131 Reputation points

2023-10-09T01:42:42.2233333+00:00

Some other interesting observations

When closing Visual Studio and reopening, I can see the GUI package manager.

After running the code (and the debugging still does not work), the GUI version of the package manager disappears, and only the CLI console version is available.
JasonPan - MSFT 4,811 Reputation points Microsoft Vendor

2023-10-09T07:37:06.9+00:00

Hi @Robert Salasidis,

If we use IoT devices that support https, will we not encounter this problem?

Best Regards

Jason
Robert Salasidis 131 Reputation points

2023-10-09T11:45:20.2866667+00:00

If the devices I am using supported it, I would just leave the application as https alone, and it should work OK.

My other option is to create a separate program running on the base computer running the Server, and use that to communicate with the IOT devices, while using ServerR to send the real time data to the WASM client. Seems needlessly complex however.

It would be nicer if I could just somehow redirect the web requests via http in the same application.
AgaveJoe 1,495 Reputation points

2023-10-09T11:55:32.9466667+00:00

I tested Blazor WASM using http and the debugger works as expected.

Keep in mind the launchSettings.json only works when the application is run from Visual Studio. If you want to host the application with http then click the run button's dropdown and select http.

Can you explain what kind of project you built? Is it a hosted Blazor WASM project? Also, it does not make sense that a Blazor WASM or Web API (HttpClient) cannot make HTTP calls. There must be something else that's wrong.
Robert Salasidis 131 Reputation points

2023-10-09T12:31:45.2533333+00:00

The debugger works as expected for me as well, when running in https created project. My problem is that I need to access http devices, and there is no way to do that with the application as is (as far as I can tell). The application will refuse to make http calls, or try to upgrade them to https (depending on the path chosen). If the https upgrade route is chosen, the IOT device does not work.

I thought about changing the application (now well after its creation) to http, using the step outlined above, and the devices can be accessed, but then the debugger does not work. Must be something in the settings that is causing this, but I do not know where to look.

Robert Salasidis 131

I tried simply adding an http Profile to launchSettings (Client and Server). I then run the app with the http drop down, and not https. The application will run in http, and will seemingly communicate with the IOT device (no HTML browser errors), but the debugging now does not work. So that is an easy way to replicate the whole thing.

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:3898",
      "sslPort": 44322
    }
  },
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:7174;http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

AgaveJoe 1,495 Reputation points

2023-10-09T14:51:14.4166667+00:00

I selecting http from the run dropdown in Visual Studio with a standard Blazor WASM project open. Debugging works and making http calls work as expected. There is no need to change the launch settings as the default template has a setting for http.

I tried the same with a hosted Blazor WASM where the server application is the start up project. Debugging and calling http calls worked too.

What kind of project did you create? Hosted Blazor WASM? Can you show us how you're making the http request to the IoT devices? Directly from the browser or perhaps from Web API.
Robert Salasidis 131 Reputation points

2023-10-09T15:47:28.86+00:00
I first created the project in https. There is no http in the drop down, unless I add as above. But when I add it - debugging does not work

Not sure about the type of project - standard WASM from the create new project menu in VS.

I am accessing the device in this manner

deviceGet = "http://" + EWdevs.ElementAt(selectedIndexes[0]).Ipaddress.ToString().TrimEnd() + "/getVars"; // this gives a string such as "http://192.168.0.111/getVars" deviceResData = await httpClientRes.GetStringAsync(deviceGet);

If I could make the http call work within the https environment that would be good, but I don't think that is possible. That is why I am trying to downgrade an https WASM app to http
AgaveJoe 1,495 Reputation points

2023-10-09T18:02:44.3333333+00:00
Not sure about the type of project - standard WASM from the create new project menu in VS.

The Blazor WASM hosted template has 3 projects; Client, Server, Shared. A Blazor WASM stand alone project does not have

app.UseHttpsRedirection(); app.UseHsts();

If I could make the http call work within the https environment that would be good, but I don't think that is possible. That is why I am trying to downgrade an https WASM app to http

If you created a Blazor WASM hosted solution, then you can call http from Web API. Blazor WASM calls Web API and Web API calls the IoT device.
Robert Salasidis 131 Reputation points

2023-10-09T19:13:01.0266667+00:00

Not being an expert here, do you have an example handy that would show how to do this.

Thanks
AgaveJoe 1,495 Reputation points

2023-10-09T20:16:14.3733333+00:00

Create a Blazor WASM hosted project. Review the "Fetch data" example which calls the WeatherForecast Web API action. This is an example of calling Web API from the Blazor WASM client.

All you have to do is call your IoT device from within the Web API action. You'll use HttpClient as illustrated in the official documentation. HttpClient gets the response from the IoT device. Return the IoT's data from the Web API action.

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/http-requests?view=aspnetcore-7.0
Robert Salasidis 131 Reputation points

2023-10-09T23:13:01.9866667+00:00

Will that allow making an http request in an https app however?
AgaveJoe 1,495 Reputation points

2023-10-09T23:17:24.5233333+00:00

Will that allow making an http request in an https app however?

yes
Robert Salasidis 131 Reputation points

2023-10-10T00:03:44.13+00:00

Thanks - Will try it tomorrow.

I have the non https version of the app working OK (doing periodic table updates etc - just have to add the graphs), but I had to remove authentication, so it will be nice to have that back again,

1 answer

Bruce (SqlWork.com) 61,731 Reputation points

2023-10-09T16:51:12.36+00:00

You are correct, browser security will not allow http calls from content loaded from https. I’d stick with https and proxy to the hosting server to call the IOT devices. This will also handle the case where the IOT device does not support CORS.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

Blazor WASM - Breakpoints not firing on Client side code - after changing app from HTTPS to HTTP

1 answer