4
Answers

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

Rahul Patil

Rahul Patil
4y
11.8k
1
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
  1. <div style="text-align: center;">    
  2.   <h3>Registration</h3>    
  3.   <div>    
  4.     <div>    
  5.       <label>UserName:</label>    
  6.       <input [(ngModel)]="username" id="username" type="text" />    
  7.     </div>    
  8.     <div>    
  9.       <label>Address:</label>    
  10.       <input [(ngModel)]="empaddress" id="empaddress" type="text" />    
  11.     </div>    
  12.     <div>    
  13.       <label>Password:</label>    
  14.       <input [(ngModel)]="password" id="password" type="text" />    
  15.     </div>    
  16.     <div>    
  17.       <label>Country:</label>    
  18.       <input [(ngModel)]="country" id="country" type="text" />    
  19.     </div>    
  20.     <button type="button" (click)="registration()">Submit</button>    
  21.   </div>    
  22. </div>  
registration.component.ts
  1. import { Component, OnInit } from '@angular/core';    
  2. import { BackendserviceService } from '../backendservice.service';    
  3.     
  4. @Component({    
  5.   selector: 'app-registration',    
  6.   templateUrl: './registration.component.html',    
  7.   styleUrls: ['./registration.component.css']    
  8. })    
  9. export class RegistrationComponent implements OnInit {    
  10.     
  11.   username: any;    
  12.   empaddress: any;    
  13.   password: any;    
  14.   country: any;    
  15.     
  16.   constructor(public myservice: BackendserviceService) { }    
  17.       
  18.   ngOnInit() {    
  19.     //this.registration();    
  20.   }    
  21.     
  22.   registration() {    
  23.     console.log("Inside registration method----------------- ")    
  24.     //here I am  using then function because its provide success and failure message    
  25.     
  26.     this.myservice.CreateUser(this.username, this.empaddress, this.password, this.country).then((data: any) => {    
  27.       console.log("registration sucessfully");    
  28.       this.username = data;    
  29.     }).catch(err => console.log(err));;    
  30.   }    
  31. }  
backendservice.service.ts
  1. import { Injectable } from '@angular/core';    
  2. import { HttpClient, HttpHeaders } from '@angular/common/http';    
  3.     
  4. const httpOptions = {    
  5.     
  6.   headers: new HttpHeaders({    
  7.     'Content-Type': 'application/json',    
  8.     'Authorization': 'my-auth-token',    
  9.     'Access-Control-Allow-Origin': '*',    
  10.     'Access-Control-Allow-Credentials': 'true',    
  11.     'Access- Control - Allow - Methods': 'GET, POST, OPTIONS',    
  12.     'Access- Control - Allow - Headers' : 'Origin, Content - Type, Accept'    
  13.   })    
  14. };    
  15. @Injectable({    
  16.   providedIn: 'root'    
  17. })    
  18. export class BackendserviceService {    
  19.     
  20.   constructor(private httpClient: HttpClient) { }    
  21.     
  22.   public CreateUser(username, empaddress, password, country) {    
  23.     return new Promise(resolve => {    
  24.       debugger    
  25.       var url = "https://localhost:44371/emps/create";    
  26.     
  27.       const postdata = {    
  28.         'username': username,    
  29.         'empaddress': empaddress,    
  30.         'password': password,    
  31.         'country': country,    
  32.       }    
  33.       debugger    
  34.       //post method with data    
  35.       return this.httpClient.post<any>(url, postdata, httpOptions)    
  36.         .subscribe((response) => {    
  37.           console.log("successfully", response.json());  //response is json format    
  38.         });    
  39.     });    
  40.   };    
  41. }  
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3.     
  4. import { AppRoutingModule } from './app-routing.module';    
  5. import { AppComponent } from './app.component';    
  6. import { RegistrationComponent } from './registration/registration.component';    
  7. import { FormsModule } from '@angular/forms';     
  8. import { HttpClientModule } from '@angular/common/http';    
  9. import { BackendserviceService } from './backendservice.service';    
  10.     
  11. @NgModule({    
  12.   declarations: [    
  13.     AppComponent,    
  14.     RegistrationComponent    
  15.   ],    
  16.   imports: [    
  17.     BrowserModule,    
  18.     AppRoutingModule,    
  19.     FormsModule,    
  20.     HttpClientModule,    
  21.   ],    
  22.   providers: [BackendserviceService],    
  23.   bootstrap: [AppComponent]    
  24. })    
  25. export class AppModule { }    
  26.  app-routing.module.ts   
  27.    
  28. import { NgModule } from '@angular/core';    
  29. import { Routes, RouterModule } from '@angular/router';    
  30. import { RegistrationComponent } from './registration/registration.component';    
  31.     
  32. const routes: Routes = [    
  33.      
  34.    { path: 'registration', component: RegistrationComponent }    
  35. ];    
  36.     
  37. @NgModule({    
  38.   imports: [RouterModule.forRoot(routes)],    
  39.   exports: [RouterModule]    
  40. })    
  41. 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
Answers (4)
Next Recommended Forum