Failed to execute 'setRequestHeader' on 'XMLHttpRequest': in angular

Question

I am calling asp.net web service in angular but give an error Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Access- Control - Allow - Methods' is not a valid HTTP header field name.

 

I create a service using this command in angular:

 

ng generate service backendservice

 

registration.component.html

<div style="text-align: center;">
  <h3>Registration</h3>
  <div>
    <div>
      <label>UserName:</label>
      <input [(ngModel)]="username" id="username" type="text" />
    </div>
    <div>
      <label>Address:</label>
      <input [(ngModel)]="empaddress" id="empaddress" type="text" />
    </div>
    <div>
      <label>Password:</label>
      <input [(ngModel)]="password" id="password" type="text" />
    </div>
    <div>
      <label>Country:</label>
      <input [(ngModel)]="country" id="country" type="text" />
    </div>
    <button type="button" (click)="registration()">Submit</button>
  </div>
</div>

registration.component.ts

import { Component, OnInit } from '@angular/core';
import { BackendserviceService } from '../backendservice.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {

  username: any;
  empaddress: any;
  password: any;
  country: any;

  constructor(public myservice: BackendserviceService) { }

  ngOnInit() {
    //this.registration();
  }

  registration() {
    console.log("Inside registration method----------------- ")
    //here I am  using then function because its provide success and failure message

    this.myservice.CreateUser(this.username, this.empaddress, this.password, this.country).then((data: any) => {
      console.log("registration sucessfully");
      this.username = data;
    }).catch(err => console.log(err));;
  }
}

backendservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {

  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'my-auth-token',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true',
    'Access- Control - Allow - Methods': 'GET, POST, OPTIONS',
    'Access- Control - Allow - Headers' : 'Origin, Content - Type, Accept'
  })
};
@Injectable({
  providedIn: 'root'
})
export class BackendserviceService {

  constructor(private httpClient: HttpClient) { }

  public CreateUser(username, empaddress, password, country) {
    return new Promise(resolve => {
      debugger
      var url = "https://localhost:44371/emps/create";

      const postdata = {
        'username': username,
        'empaddress': empaddress,
        'password': password,
        'country': country,
      }
      debugger
      //post method with data
      return this.httpClient.post<any>(url, postdata, httpOptions)
        .subscribe((response) => {
          console.log("successfully", response.json());  //response is json format
        });
    });
  };
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BackendserviceService } from './backendservice.service';

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [BackendserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }
 app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from './registration/registration.component';

const routes: Routes = [

   { path: 'registration', component: RegistrationComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

see my debugging console

 

 

error :

 

and record not inserted in the database what is an issue? I am calling asp.net web service in angular but I am facing this error and my record is not inserted in the database?

 

please help