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
– mohsen solhnia, Commented Jun 10, 2018 at 12:45
And you must adding a nuget library in your asp project and manipulate your route. — mohsen solhnia
– mohsen solhnia, Commented Jun 10, 2018 at 12:48
Im not sure this error caused by cros, because you didnt shared you http.post codes to us — mohsen solhnia
– mohsen solhnia, Commented Jun 10, 2018 at 12:49
@mohsensolhnia There is no web.config in ASP.NET Core. I've enabled cors in ASP.NET Core like this: link . 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
– Fabian Kress, Commented Jun 10, 2018 at 12:57
maybe your returned json size is big.... cant solve until see your code — mohsen solhnia
– mohsen solhnia, Commented Jun 10, 2018 at 13:05

Fabian Kress · Accepted Answer · 2018-06-10 14:11:19Z

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, 2018 at 14:11

Fabian Kress

14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christo Goosen · Accepted Answer · 2018-06-10 14:21:20Z

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, 2018 at 14:21

Christo Goosen

5844 silver badges12 bronze badges

4 Comments

Fabian Kress Over a year ago

Thank your for the hint. I had to add "rejectUnauthorized": false to the proxy because I'm using a self signed certificate.

Christo Goosen Over a year ago

Pleasure! You could even use mitm proxy, it has a certificate you can install on your phone and use to test API calls on self-signed certificates.

mohsen solhnia Over a year ago

never use proxy. it dosnt work in native device specially in ios

Christo Goosen Over a year ago

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.

Collectives™ on Stack Overflow

Error when accessing ASP.NET Core WebApi from Ionic

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related