发布请求期间出现 Angular ERR_CONNECTION_REFUSED 错误

Question

I'm using CORS to connect Angular to the Database via .NET WebAPI but I'm getting this error:

I can't pinpoint if the problem is on Angular or on the .NET side so any help is appreciated. Here are my angular component + service. Let me know if you need more info:

export class SleepComponent implements OnInit {

  constructor(public service : SleepService) { }

  ngOnInit(): void {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if(form!=null)
    form.resetForm();
    this.service.formData = {
      SleepId : null,
      Start: '',
      Finish: '', 
    }
  }

  onSubmit(form : NgForm) {
      this.insertRecord(form)
  }

  insertRecord(form: NgForm) {
    console.log(this.service.formData.Finish)
    this.service.postSleep(form.value).subscribe(
      res=> { this.resetForm(form) }
    ), 

      err => {
      console.log(err);
    }
  }

export class SleepService {

  formData: Sleep;
  readonly rootUrl = "https://localhost:44398/api"

  constructor(private http: HttpClient) { }

  postSleep (formData: Sleep) {
    return this.http.post(this.rootUrl+'/main_tb', formData )

  }

here's the api controller:

     [ResponseType(typeof(main_tb))]
        public IHttpActionResult Postmain_tb(main_tb main_tb)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.main_tb.Add(main_tb);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = main_tb.SleepId }, main_tb);
        }

Here's the webconfig.cs

{

            //Enable CORS
            config.EnableCors(new EnableCorsAttribute("http://localhost:4200/", headers:"*", methods: "*"));
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

Answer 1

Please add below configuration to your web config

<httpProtocol>
      <customHeaders>
  <add name="Access-Control-Allow-Origin" value="*" />
  <add name="Access-Control-Allow-Headers" value="accept,accesstoken,authorization,cache- 
  control,pragma,content-type,origin" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,TRACE,HEAD,OPTIONS,TOKEN" />
      </customHeaders>
    </httpProtocol>

and Here is webapi cors config

var cors = new EnableCorsAttribute("http://localhost, ", "accept,accesstoken,authorization,cache-control,pragma,content-type,origin", "GET,PUT,POST,DELETE,TRACE,HEAD,OPTIONS,TOKEN");
    config.EnableCors(cors);

If its working fine from Postman not from a browser its a CORS issue, You can check in the inspect network Tab for preflight request (OPTIONS) kindly confirm its working