Problem with CORS in Angular 7 application and Webapi

Asked

Viewed 49 times

0

Hey, guys, good morning. I am creating my first Angular 7 application with . NET Core Webapi.

After all the structure of the mounted front, I went to communicate a get in an api I created and managed using an extension for Chrome that enables CORS, according to the method below.

getAgenda() {
    return this.http.get(apiUrl)
      .subscribe(d=> console.log(d));
  }

** This my apiUrl variable is my webapi running on localhost.

With the above method, I was able to obtain values. inserir a descrição da imagem aqui

However, when I call another method referring to another Component, using the POST, I have error. Note the screen below:

In-service method:

AddTipoPerfil(tipoperfil) {
    this.http.post(apiUrl, tipoperfil)
      .subscribe(res => console.log(res));
  }

Method of my Communication:

addTipoPerfil(ret){
    const obj = {
      Nome: ret.value.Nome,
      id: 0
    }

    this.apiService.AddTipoPerfil(obj);
  }

** Where Ret is my formgroup.

Entity in my backend:

[Table("TipoPerfil")]
    public class TipoPerfil : Implementation.EntityBase
    {
        [Column("Nome")]
        public string Nome { get; set; }
    }

I get this mistake: Recebo este erro

Who can help, thank you <3 !

  • CORS is not error is lack of configuration and or wrong configuration, you have to enable in your backend, when you make the request for the backend the browser will first send a request to the backend to know what operations have available, that OPTIONS, if the operation is not released in the OPTIONS response the browser will block with that message you are seeing. Post more information about your backend to be able to help

  • 1

    I have not made any settings in my backend other than setting up EF Core, maybe that’s why. I will search how to set up, thank you!

  • Your api address is on the right localhost? try placing a local address for it. For example: local-myplication.com.br/api and configuring your front-end with the same domain: local-myplication.com.br. I’ve had this problem before, but as I work with other back-end technology I use NGINX for such a configuration.

  • My endpoint is http://localhost:5400/api/agenda, in which case, it is the address of my controller api. In Angular, there is a url storing this value and get is done at that address.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.