Error when accessing ASP.NET Core WebApi from Ionic

Question

I have some issues with calling my ASP.NET Core WebAPI from my Ionic app.

I can see in the developer tools that the data get’s loaded correctly, but Ionic is giving me an error:

error message from Ionic:

data loaded from the api:

CORS is enabled in the api:

 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();
    }
}

I think the error is caused by Ionic or Angular. When I’m loading the data from a public api, everything works fine. I’ve also tried accessing the api with ssl and without.

When you have any questions, feel free to ask me in the comments.

Edit

This is how I call the 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);
      });
    });
  }
}

and this is my controller:

[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();
    }
}

I had this problem, i solved that with adding cors allow origin to web.config also, i dont use any proxy any chrome plugin. All API functions work fine — mohsen solhnia, Jun 10 '18 at 12:45
And you must adding a nuget library in your asp project and manipulate your route. — mohsen solhnia, Jun 10 '18 at 12:48
Im not sure this error caused by cros, because you didnt shared you http.post codes to us — mohsen solhnia, Jun 10 '18 at 12:49
@mohsensolhnia There is no web.config in ASP.NET Core. I've enabled cors in ASP.NET Core like this: [link](https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1) . The error is not caused by cors. I'm able to call the api and get the data but Ionic gives me that error. — Fabian Kress, Jun 10 '18 at 12:57
maybe your returned json size is big.... cant solve until see your code — mohsen solhnia, Jun 10 '18 at 13:05
@mohsensolhnia Please see my edit. I've added the controller and the provider which calls the api. — Fabian Kress, Jun 10 '18 at 13:55
Well, you are calling GET. So, you can see result of todo in any browser. Copy paste https :// localhost:5001/api/todo to your browser. But im not sure you got any result in localhost with https protocol. — mohsen solhnia, Jun 10 '18 at 14:01
https://stackoverflow.com/questions/47855856/calling-https-url-on-http-get-request-angularjs — mohsen solhnia, Jun 10 '18 at 14:09

score 0 · Accepted Answer · answered Jun 10 '18 at 14:11

0

fixed it by adding the port number:

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

answered Jun 10 '18 at 14:11

Fabian Kress

1
4

score 0 · Answer 2 · answered Jun 10 '18 at 14:21

0

You can use the ionic.config.json file to configure a proxy in your app:

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

Then when doing the http call:

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

More info Ionic Blog

answered Jun 10 '18 at 14:21

Christo Goosen

566
4
11

Thank your for the hint. I had to add "rejectUnauthorized": false to the proxy because I'm using a self signed certificate. – Fabian Kress Jun 10 '18 at 14:46
Pleasure! You could even use [mitm proxy](https://mitmproxy.org/), it has a certificate you can install on your phone and use to test API calls on self-signed certificates. – Christo Goosen Jun 10 '18 at 16:03
never use proxy. it dosnt work in native device specially in ios – mohsen solhnia Jun 10 '18 at 16:12
You can't say never use proxy. Proxy is mostly for ionic serve -cl which will launch in chrome/firefox/IE. On mobile device the origin is the document itself, not a nodejs server serving the code. – Christo Goosen Jun 10 '18 at 20:48

Error when accessing ASP.NET Core WebApi from Ionic

2 Answers2