Why I still face this error

Access to XMLHttpRequest at 'http://localhost:21063/api/clints' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

even though I enabled it in my asp.net core web api Startup.cs

services.AddCors(options =>
            {
                options.AddPolicy("enableCors",
                builder =>
                {
                    builder.WithOrigins("http://localhost:4200")
                                        .AllowAnyHeader()
                                        .AllowAnyMethod()
                                        .AllowCredentials()
                                        .Build();
                });
            });


        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc();
            app.UseCors("enableCors");
        }
    }
}

and this is my Controllel.cs

... [Route("api/[controller]")]
    [ApiController]
    [EnableCors("enableCors")]
    public class ClintsController : ControllerBase
    {
        private readonly OneClickDBContext _context;

        public ClintsController(OneClickDBContext context)
        {
            _context = context;
        } 
...

the string thing I get data from the same API normally and this error happened when I post.

my componanet.ts

...
  ngOnInit() {
    this.Service.getAllClients()
      .subscribe(data => this.clients = data);

    //post data
    this.Service.client = {
      id: 0,
      name: null,
      phone: null,
      address: null,
      account: 0,
      nots: null,
      branchId: 0,
      type: null,
    }

  PostClient() {
    if (this.Service.client.id == 0) {

      this.Service.addClient().subscribe(res => {
        this.Service.getAllClients()
      },
      )}
    else {
      this.Service.editClient().subscribe(res => {
        this.Service.getAllClients()
      },
        err => {
          console.log(err)
        })
    }
  }
...

service.ts

export class ClientsService {

  clientsUrl="http://localhost:21063/api/clints"

  client:Clients;


  constructor(private http:HttpClient) { }
getAllClients():Observable<Clients[]>{
    return this.http.get<Clients[]>(this.clientsUrl);

}
addClient(){
return this.http.post(this.clientsUrl,this.client)

  }

editClient(){
  return this.http.put(this.clientsUrl + "/" + this.client.id,this.client)

    } 
}

HTML form

<div class="modal fade" id="add_client" tabindex="-1" role="dialog" aria-labelledby="add_clientTitle"aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 class="modal-title" id="add_clientTitle">إضافة عميل جديد</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin: -1rem -1rem;">

                           <span aria-hidden="true">&times;</span>
                         </button>
                    </div>
                           <div class="modal-body">
                               <form class="row" ngForm="form" (submit)="post_client()"> 
                                     <div class="form-group col-12 col-md-6">
                                          <div class="modal_group group">
                                               <input type="text" required name="clientName" [(ngModel)]="Service.client.name">
                                                    <span class="highlight"></span>
                                                    <span class="bar"></span>
                                                    <label>اسم العميل</label>
                                             </div>
                                         </div>
                                              <div class="form-group col-12 col-md-6">
                                                 <div class="modal_group group">
                                                     <input type="text" required name="clientPhone" [(ngModel)]="Service.client.phone">
                                                        <span class="highlight"></span>
                                                        <span class="bar"></span>
                                                        <label>الهاتف </label>
                                                    </div>
                                                </div>
                                                <div class="form-group col-12 col-md-6">
                                                    <div class="modal_group group">
                                                        <input type="text" required name="clientAddress" [(ngModel)]="Service.client.address">
                                                        <span class="highlight"></span>
                                                        <span class="bar"></span>
                                                        <label>العنوان</label>
                                                    </div>
                                                </div>
                                                <div class="form-group col-12 col-md-6">
                                                    <div class="modal_group group ">
                                                        <input type="text" required name="clientAcc" [(ngModel)]="Service.client.account">
                                                        <span class="highlight"></span>
                                                        <span class="bar"></span>
                                                        <label>الرصيد السابق</label>
                                                    </div>
                                                </div>
                                                <div class="form-group col-12 col-md-6">
                                                    <div class="modal_group group">
                                                        <input type="text" required name="clientNote" [(ngModel)]="Service.client.nots">
                                                        <span class="highlight"></span>
                                                        <span class="bar"></span>
                                                        <label>ملاحظات</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <!--end modal-body-->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">إلغاء</button>
                                            <button type="button" class="btn btn-primary" (click)= " PostClient()" >حفظ</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end Modal -->

note when I open in firefox the error was

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:21063/api/clints. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

ERROR Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://localhost:21063/api/clints", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:21063/api/clints: 0 Unknown Error", error: error }.

update

my controller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using OneClickAPI.Models;

namespace OneClickAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    [EnableCors("enableCors")]
    public class ClintsController : ControllerBase
    {
        private readonly OneClickDBContext _context;

        public ClintsController(OneClickDBContext context)
        {
            _context = context;
        }

        // GET: api/Clints
        [HttpGet]
        public IEnumerable<ClintsTbl> GetClintsTbl()
        {
            return _context.ClintsTbl;
        }

        // GET: api/Clints/5
        [HttpGet("{id}")]
        public async Task<IActionResult> GetClintsTbl([FromRoute] int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            var clintsTbl = await _context.ClintsTbl.FindAsync(id);

            if (clintsTbl == null)
            {
                return NotFound();
            }

            return Ok(clintsTbl);
        }

        // PUT: api/Clints/5
        [HttpPut("{id}")]
        public async Task<IActionResult> PutClintsTbl([FromRoute] int id, [FromBody] ClintsTbl clintsTbl)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != clintsTbl.Id)
            {
                return BadRequest();
            }

            _context.Entry(clintsTbl).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!ClintsTblExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return NoContent();
        }

        // POST: api/Clints
        [HttpPost]
        public async Task<IActionResult> PostClintsTbl([FromBody] ClintsTbl clintsTbl)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            _context.ClintsTbl.Add(clintsTbl);
            await _context.SaveChangesAsync();

            return CreatedAtAction("GetClintsTbl", new { id = clintsTbl.Id }, clintsTbl);
        }

        // DELETE: api/Clints/5
        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteClintsTbl([FromRoute] int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            var clintsTbl = await _context.ClintsTbl.FindAsync(id);
            if (clintsTbl == null)
            {
                return NotFound();
            }

            _context.ClintsTbl.Remove(clintsTbl);
            await _context.SaveChangesAsync();

            return Ok(clintsTbl);
        }

        private bool ClintsTblExists(int id)
        {
            return _context.ClintsTbl.Any(e => e.Id == id);
        }
    }
}

Update2 Preview

An unhandled exception occurred while processing the request.
SqlException: The INSERT statement conflicted with the FOREIGN KEY constraint "FK_ClintsTbl_branchTbl". The conflict occurred in database "OneClickDB", table "dbo.branchTbl", column 'id'.
The statement has been terminated.
System.Data.SqlClient.SqlCommand+<>c.<ExecuteDbDataReaderAsync>b__122_0(Task<SqlDataReader> result)

DbUpdateException: An error occurred while updating the entries. See the inner exception for details.
Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)

Stack Query Cookies Headers
SqlException: The INSERT statement conflicted with the FOREIGN KEY constraint "FK_ClintsTbl_branchTbl". The conflict occurred in database "OneClickDB", table "dbo.branchTbl", column 'id'. The statement has been terminated.
System.Data.SqlClient.SqlCommand+<>c.<ExecuteDbDataReaderAsync>b__122_0(Task<SqlDataReader> result)
System.Threading.Tasks.ContinuationResultTaskFromResultTask<TAntecedentResult, TResult>.InnerInvoke()
System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, object state)
System.Threading.Tasks.Task.ExecuteWithThreadLocal(ref Task currentTaskSlot)
Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteAsync(IRelationalConnection connection, DbCommandMethod executeMethod, IReadOnlyDictionary<string, object> parameterValues, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)

Show raw exception details
System.Data.SqlClient.SqlException (0x80131904): The INSERT statement conflicted with the FOREIGN KEY constraint "FK_ClintsTbl_branchTbl". The conflict occurred in database "OneClickDB", table "dbo.branchTbl", column 'id'.
The statement has been terminated.
   at System.Data.SqlClient.SqlCommand.<>c.<ExecuteDbDataReaderAsync>b__122_0(Task`1 result)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteAsync(IRelationalConnection connection, DbCommandMethod executeMethod, IReadOnlyDictionary`2 parameterValues, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
ClientConnectionId:5ea81819-1fa1-41b2-ba3a-1e8e66c0af3f
Error Number:547,State:0,Class:16
DbUpdateException: An error occurred while updating the entries. See the inner exception for details.
Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.ExecuteAsync(DbContext _, ValueTuple<IEnumerable<ModificationCommandBatch>, IRelationalConnection> parameters, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.SqlServer.Storage.Internal.SqlServerExecutionStrategy.ExecuteAsync<TState, TResult>(TState state, Func<DbContext, TState, CancellationToken, Task<TResult>> operation, Func<DbContext, TState, CancellationToken, Task<ExecutionResult<TResult>>> verifySucceeded, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(IReadOnlyList<InternalEntityEntry> entriesToSave, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.DbContext.SaveChangesAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken)
OneClickAPI.Controllers.ClintsController.PostClintsTbl(ClintsTbl clintsTbl) in ClintsController.cs
+
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            _context.ClintsTbl.Add(clintsTbl);
            await _context.SaveChangesAsync();
            return CreatedAtAction("GetClintsTbl", new { id = clintsTbl.Id }, clintsTbl);
        }
        // DELETE: api/Clints/5
        [HttpDelete("{id}")]
Microsoft.AspNetCore.Mvc.Internal.ActionMethodExecutor+TaskOfIActionResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, object controller, object[] arguments)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeActionMethodAsync()
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeNextActionFilterAsync()
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ActionExecutedContext context)
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeInnerFilterAsync()
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeNextResourceFilter()
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeFilterPipelineAsync()
Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeAsync()
Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

Show raw exception details
Microsoft.EntityFrameworkCore.DbUpdateException: An error occurred while updating the entries. See the inner exception for details. ---> System.Data.SqlClient.SqlException: The INSERT statement conflicted with the FOREIGN KEY constraint "FK_ClintsTbl_branchTbl". The conflict occurred in database "OneClickDB", table "dbo.branchTbl", column 'id'.
The statement has been terminated.
   at System.Data.SqlClient.SqlCommand.<>c.<ExecuteDbDataReaderAsync>b__122_0(Task`1 result)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteAsync(IRelationalConnection connection, DbCommandMethod executeMethod, IReadOnlyDictionary`2 parameterValues, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.ExecuteAsync(DbContext _, ValueTuple`2 parameters, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.SqlServer.Storage.Internal.SqlServerExecutionStrategy.ExecuteAsync[TState,TResult](TState state, Func`4 operation, Func`4 verifySucceeded, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(IReadOnlyList`1 entriesToSave, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(Boolean acceptAllChangesOnSuccess, CancellationToken cancellationToken)
   at Microsoft.EntityFrameworkCore.DbContext.SaveChangesAsync(Boolean acceptAllChangesOnSuccess, CancellationToken cancellationToken)
   at OneClickAPI.Controllers.ClintsController.PostClintsTbl(ClintsTbl clintsTbl) in E:\my project\OneClickAPI\Controllers\ClintsController.cs:line 96
   at Microsoft.AspNetCore.Mvc.Internal.ActionMethodExecutor.TaskOfIActionResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeActionMethodAsync()
   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeNextActionFilterAsync()
   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ActionExecutedContext context)
   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.InvokeInnerFilterAsync()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeNextResourceFilter()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Rethrow(ResourceExecutedContext context)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeFilterPipelineAsync()
   at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeAsync()
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
No QueryString data.

No cookie data.

Variable    Value
Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.9,ar;q=0.8
Connection  Keep-Alive
Content-Length  97
Content-Type    application/json
Host    localhost:4200
MS-ASPNETCORE-TOKEN 669b781b-f87b-4a05-bf6c-5a88181a3530
Origin  http://localhost:4200
Referer http://localhost:4200/clients/clientInfo
sec-fetch-mode  cors
sec-fetch-site  same-origin
User-Agent  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
X-Original-For  127.0.0.1:10620
X-Original-Proto    http

app.UseCors() middleware should precede app.UseMvc(); middleware.

Try to switch the order:

 app.UseCors("enableCors");
 app.UseMvc(); 

Update

For development, using proxy (that comes with angular-cli) is most recommended.

Proxying to a backend server

You can use the proxying support in the webpack dev server to divert certain URLs to a backend server, by passing a file to the --proxy-config build option. For example, to divert all calls for http://localhost:4200/api to a server running on http://localhost:21063/api, take the following steps.

Step 1:

Create a file called proxy.conf.json in your project's src/ folder..

Step 2:

Add the following contents to the newly created proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:21063",
    "secure": false
  }
}

Step 3:

In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

Step 4:

Edit your service.ts

export class ClientsService {

  clientsUrl="http://localhost:4200/api/clints"

  client:Clients;

Step 5:

To run the dev server with this proxy configuration, call ng serve.