从混合移动应用程序Blazor Mobile访问Web API

Question

我正在开发一个Blazor混合应用程序，目前正在尝试从我的手机上访问一个.NET Web API。

我已将.NET Web应用程序部署到IIS。API在JSON中只返回weatherforecast数据（对于那些不熟悉的人来说，数据类型已经在project中定义，并且随模板一起提供）。

API响应如下所示：

[  
 {"date":"2020-09-18T15:55:27.4724752+03:00","temperatureC":-6,"temperatureF":22,"summary":"Hot"}, 

 {"date":"2020-09-19T15:55:27.4725087+03:00","temperatureC":27,"temperatureF":80,"summary":"Bracing"},
 
 {"date":"2020-09-20T15:55:27.4725155+03:00","temperatureC":54,"temperatureF":129,"summary":"Bracing"},
 
 {"date":"2020-09-21T15:55:27.4725221+03:00","temperatureC":1,"temperatureF":33,"summary":"Scorching"},
 
 {"date":"2020-09-22T15:55:27.4725302+03:00","temperatureC":-3,"temperatureF":27,"summary":"Chilly"}  
]

我将它部署到端口3004的本地主机上。所以在我PC的浏览器和手机的浏览器中，我都能成功到达这个地址并得到这个响应。

但是，在我的移动应用程序中，有一个方法负责检索数据，定义为：AppState.cs：

public async Task<List<WeatherForecast>> GetForecastAsync()
{
     return await _http.GetFromJsonAsync<List<WeatherForecast>>("http://192.168.1.22:3004/weatherforecast");
}

这是从index.razor调用的：

@inject AppState appState

@if(todos == null){
<p> Loading </p>
}
else {
 // loop todos in foreach 
}

@code {
    
    List<Todo> todos;

    protected override async Task OnInitializedAsync()
    {
         todos = await appState.GetForecastAsync();
         appState.OnChange += UpdateState;
    }

此GET请求返回NULL。我用https://jsonplaceholder.typicode.com/todos/中的JSON占位符试过了（当然把weatherforecast更改为todo)没有问题！

可能的解决方案我试着

• 将我的本地IP更改为10.0.2.2:3004，因为我使用的是android手机，但没有使用。
• 我已尝试使用http://和https:/，但仍然没用。
• 配置CORS以允许API中的任何源:

启动。CS

public void ConfigureServices(IServiceCollection services)
 {
            services.AddCors(options => options.AddDefaultPolicy(builder => builder.AllowAnyOrigin()));
            services.AddControllers();
}

//...

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
      //...
      app.UseHttpsRedirection();

      app.UseRouting();


      app.UseCors();

      app.UseAuthorization();

      //...
}

如何才能从手机APP到达API？

Answer 1

经过几个小时的研究和反复试验，我找到了它。

所以我会一步一步解释流程：

首先，当我们想要的页面打开时，我们想要从远程数据库获取数据。在我的例子中，我从我的主页index.razor中调用它：

索引剃刀

@page "/"
@inject AppState appState
@implements IDisposable

@if (forecasts== null)
{
    <p>Null</p>
}
else
{
    @foreach (var forecast in forecasts)
    {
        <p>@forecast .Date</p>
        <p>@forecast .TemperatureC</p>
        <p>@forecast .TemperatureF</p>
        <p>@forecast .Summary</p>
    }
}
@code {
    List<WeatherForecast> forecasts;

    protected override async Task OnInitializedAsync()
    {
       forecasts = await appState.GetForecastAsync(); // We call the Get Forecast Async via appState
       appState.OnChange += UpdateState;
    }

    public void Dispose() => appState.OnChange -= UpdateState;

    private async Task UpdateState()
    {
        StateHasChanged();
    }


    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

        public string Summary { get; set; }
    }
}

我们需要AppState是因为我们需要跟踪状态，所以它就像一个状态管理器。

然后跳转到appstate.cs：

class AppState
{
       HttpClient _http;

       public AppState()
       {
           _http = new HttpClient() { BaseAddress = new Uri("http://192.168.1.22:3000/") };

       public async Task<List<WeatherForecast>> GetForecastAsync()
       {
           try
           {
               return await _http.GetFromJsonAsync<List<WeatherForecast>>("weatherforecast");
           }
           catch (Exception ex)
           {
               Debug.WriteLine(@"\tERROR {0}", ex.Message);
           }
           return new List<WeatherForecast>();
       }

    //There is also OnChange method here but it's irrelevant. 
}

>

我下载了ISSexpress-proxy并将api代理到另一个端口，因为我出现了“无效主机名”错误。

在初始化httpclient时，我给出了作为本地IP的baseAddress，而不是用于访问Android上的localhost的10.0.2.2。

我仍然收到HTTP通信错误。在AndroidManifest.xml文件中，我将android:targetSandboxVersion=“1”添加到 中，并将android:usesClearTextTraffic=“true”添加到 中。多亏了这个答案，我找到了解决问题的方法。