How do I connect to the c# web api out of my blazor (c#) code, both running on gitpod?

Question

I'm currently working on a PoC (Proof of concept) application with Blazor in the front-end and a c# web api in the back-end for the data access.

I'm getting the ERR_CONNECTION_REFUSED everytime I want to access the api. I do kind of have a weird setup.

I use gitpod for developing (Online IDE, visual studio code online)
The whole thing is running on a virtual Ubuntu server
Folder structure is:

blazor_poc

api

Controllers

ApiRunningController.cs

BlazorApp

Pages

Index.razor

I need to call the api from the Index.razor. I'm calling the API like this:

protected override async Task OnInitializedAsync()
{
    try
    {
        status = await Http.GetJsonAsync<string>("https://localhost:8394/ApiRunningController");
    }
    catch(Exception e)
    {
        requestSuccess = false;
        status = "ERROR: " + e.Message;
    }
 }

Thats what the API config looks like. launchSettings.json (only the "api": { } section ):

"api": {
  "commandName": "Project",
  "launchBrowser": true,
  "launchUrl": "apirunningcontroller",
  "applicationUrl": "https://localhost:8394;http://localhost:8393",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }

My ConfigureServices() and Configure() methods in the Startup.cs:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddCors();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

        app.UseCors(c => c
               .AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader()
           );
    }

The Api Controller:

[ApiController]
[Route("[controller]")]
public class ApiRunningController : ControllerBase
{
    // Some other code like initializing a logger in the constructor etc...
    [HttpGet]
    public string Get()
    {
        ApiModel model = new ApiModel();
        return model.Status;
    }
}

It's a lot of code I think I have posted the important code snippets. If I forgot something don't mind leaving a comment. I'll post it as soon as possible.

Did you try to call the api your browser ? Your url should be : `https://localhost:8394/ApiRunning` — agua from mars, Feb 07 '20 at 13:40
If you want to access ports exposed in a gitpod dev environment from outside, you need to translate the localhost URL to the public one. Run `gp url ` on the terminal to get the external URL. See https://www.gitpod.io/docs/command-line-interface/#url — Sven Efftinge, Feb 07 '20 at 14:06

score 2 · Accepted Answer · answered Feb 07 '20 at 14:47

Solution of user: sven-efftinge

Had to do a "gp url 8394" in the console to get the translated url for the port 8394. Then I had to use that url for the HttpRequest.

protected override async Task OnInitializedAsync()
{
    try
    {
        string translated_url = "https://8394-...gitpod.io/ApiRunningController"
        status = await Http.GetJsonAsync<string>(translated_url);
    }
    catch(Exception e)
    {
        requestSuccess = false;
        status = "ERROR: " + e.Message;
    }
 }

How do I connect to the c# web api out of my blazor (c#) code, both running on gitpod?

1 Answers1