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引起的。当我从公共API加载数据时，一切正常。我也试过用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时出错

2 个答案: