Loading
Failed to execute 'setRequestHeader' on 'XMLHttpRequest': in angular    
  •     "button" (click)="registration()">Submit    
  •       
  •   
    • 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(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

    4 Replies

    Know the answer? Post it — somebody with the same question will find it here.