从 Ionic 访问 ASP.NET Core WebApi 时出错

Question

我在从 Ionic 应用程序调用 ASP.NET Core WebAPI 时遇到了一些问题。

我可以在开发人员工具中看到数据已正确加载，但 Ionic 给我一个错误：

来自 Ionic 的错误消息：

从 api:

加载的数据

在 api:

中启用了 CORS

 public class Startup
 {
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();   
        services.AddDbContext<TodoContext>(opt =>
            opt.UseInMemoryDatabase("TodoList"));
        services.AddMvc()
            .SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    }

    public void Configure(IApplicationBuilder app)
    {
        app.UseCors(builder => builder.WithOrigins("http://localhost"));
        app.UseMvc();
    }
}

我认为错误是由 Ionic 或 Angular 引起的。当我从 public api 加载数据时，一切正常。我也尝试过使用 ssl 和不使用 ssl 访问 api。

有什么问题可以在评论里问我

编辑

我就是这样称呼 api:

@Injectable()
export class RestProvider {

apiUrl = 'https://localhost:5001/api';

constructor(public http: HttpClient) { }

getTodoItems() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl + '/todo').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }
}

这是我的控制器：

[Route("api/[controller]")]
[ApiController]
public class TodoController : ControllerBase
{
    private readonly TodoContext _context;

    public TodoController(TodoContext context)
    {
        _context = context;

        if (_context.TodoItems.Count() == 0)
        {
            _context.TodoItems.Add(new TodoItem { Title = "Item1" });
            _context.TodoItems.Add(new TodoItem { Title = "Item2" }); 
            _context.SaveChanges();
        }
    }

    [HttpGet]
    public ActionResult<List<TodoItem>> GetAll()
    {
        return _context.TodoItems.ToList();
    }
}

Answer 1

通过添加端口号修复它：

public void Configure(IApplicationBuilder app)
{
    app.UseCors(builder => builder.WithOrigins("http://localhost:8100").AllowAnyMethod());
    app.UseMvc();
}

Answer 2

您可以使用 ionic.config.json 文件在您的应用中配置代理：

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

然后在进行 http 调用时：

httpClient.get(proxyHost + '/api');

更多信息Ionic Blog

从 Ionic 访问 ASP.NET Core WebApi 时出错

Error when accessing ASP.NET Core WebApi from Ionic

ionic-framework

asp.net-core-webapi

ionic3

angular

asp.net-core-2.1