CRUD Operation in Angular using WebApi - asp.net-mvc

Question

employee.component.ts
import { Component, OnInit } from "#angular/core";
import { EmployeeService } from "../Shared/employee.service";
import { NgForm } from "#angular/forms";
#Component({
selector: "app-employe",
templateUrl: "./employe.component.html",
styleUrls: ["./employe.component.css"]
})
export class EmployeComponent implements OnInit {
constructor(private employeeService: EmployeeService) {}
ngOnInit() {
this.resetForm();
}
resetForm(form?: NgForm) {
if (form != null) form.reset();
this.employeeService.SelectedEmployee = {
EmpId: null,
FirstName: "",
LastName: "",
EmpCode: "",
Position: "",
Office: ""
};
}
onSubmit(form ?:NgForm){
this.employeeService.postEmployee(form.value).subscribe(data =>{
this.resetForm(form);
})
}
}
Employee.service.ts
import { Injectable } from "#angular/core";
import { Employee } from "./employee.model";
import {
Http,
Response,
Headers,
RequestOptions,
RequestMethod
} from "#angular/http";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import "rxjs/add/operator/toPromise";
import 'rxjs/add/operator/catch';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
#Injectable({
providedIn: "root"
})
export class EmployeeService {
SelectedEmployee: Employee;
constructor(private http: Http) {}
postEmployee(emp : Employee){
var body = JSON.stringify(emp);
var headerOptions = new Headers({'Content-Type':'application/json'});
var requestOptions = new RequestOptions({method : RequestMethod.Post,headers : headerOptions});
return this.http.post('http://localhost:3184/api/Emp',body,requestOptions).map(x => x.json());
}
}
<form class="emp-form" #employeForm="ngForm" >
<input type="hidden" name="EmployeeID" #EmployeeID="ngModel" [(ngModel)]="employeeService.SelectedEmployee.EmpID">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" name="FirstName" #FirstName="ngModel" [(ngModel)]="employeeService.SelectedEmployee.FirstName"
placeholder="First Name" required>
<div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">This Field is Required.</div>
</div>
<div class="form-group col-md-6">
<input class="form-control" name="LastName" #LastName="ngModel" [(ngModel)]="employeeService.SelectedEmployee.LastName" placeholder="Last Name"
required>
<div class="validation-error" *ngIf="LastName.invalid && LastName.touched">This Field is Required.</div>
</div>
</div>
<div class="form-group">
<input class="form-control" name="Position" #Position="ngModel" [(ngModel)]="employeeService.SelectedEmployee.Position" placeholder="Position">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" name="EmpCode" #EmpCode="ngModel" [(ngModel)]="employeeService.SelectedEmployee.EmpCode" placeholder="Emp Code">
</div>
<div class="form-group col-md-6">
<input class="form-control" name="Office" #Office="ngModel" [(ngModel)]="employeeService.SelectedEmployee.Office" placeholder="Office">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<button [disabled]="!employeForm.valid" type="submit" class="btn btn-lg btn-block btn-info" (click)="onSubmit(employeForm)">
<i class="fa fa-floppy-o"></i> Submit</button>
</div>
<div class="form-group col-md-4">
<button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeForm)">
<i class="fa fa-repeat"></i> Reset</button>
</div>
</div>
</form>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace WebDemo
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.EnableCors(new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*"));
// methods:'Access-Control-Request-Method',
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
Here I tried to use Post Data on SqlServer on Button Press and it gives me this error:
Failed to load resource: the server responded with a status of 400 (Bad Request)
localhost/:1 Access to XMLHttpRequest at 'http://localhost:3184/api/Emp' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Please help me to resolve, thanks in advance. I used the reference enter link description here

Answer 1

add origin option before url you need to allow:
config.EnableCors(new EnableCorsAttribute(origins: "http://localhost:4200", headers: "*", methods: "*"));
also you can allow every url like this
config.EnableCors(new EnableCorsAttribute(origins: "*", headers: "*", methods: "*"));

Answer 2

try this
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Answer 3

400 Error is clear indication of wrong data passing to server. Please check the data what server is expecting and the data you are passing from the Angular side.