Опубликовать данные в Asp.net web api, используя Angular 2

Question

Я хочу опубликовать данные на моем asp.net web api, используя угловые 2, но я получаю эти ошибки. Я не могу понять, что не так с моим кодом.

Asp.net Код

[ResponseType(typeof(User))] 
    public IHttpActionResult PostUser(User user) 
    { 
     if (!ModelState.IsValid) 
     { 
      return BadRequest(ModelState); 
     } 

     db.Users.Add(user); 
     db.SaveChanges(); 

     return CreatedAtRoute("DefaultApi", new { id = user.UserID }, user); 
    } 

Угловой 2 Код

////////////////////// //////////////////////////////////// Обслуживание ///////////// //////////////////////////////////////////////

@Injectable() 
export class TaskService { 

    private Url = 'https://jsonplaceholder.typicode.com/posts'; 

    private handleError(error: any): Promise<any> { 
    debugger; 
    console.error('An error occurred', error); // for demo purposes only 
    return Promise.reject(error.message || error); 
} 
    task; 

    constructor(private _http : Http) { 
    } 

    getItems() 
    { 
    var Promise =this._http.get(
     'http://localhost:27353/api/Users') 
     .map(res=>res.json()) 
     .toPromise() 
    Promise.then(taskFromServer => this.task = taskFromServer) 
    Promise.catch(this.handleError) 
    } 

    postitems(userId,username,userrole) 
    { 
     debugger; 
     let data = { 
     "UserName": username, 
     "UserRole": userrole 

     } 
    //let body = JSON.stringify(data); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this._http 
    .post('http://localhost:27353/api/Users', JSON.stringify(data), {headers: headers}) 
    .toPromise() 
    .then(res => res.json().data) 
    .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
} 

} 

///////////////////////////////////////////////Task Component ///////////////////////////////////////////////////// 
@Component({ 

    selector: 'tasks', 
    providers: [TaskService], 
    template: `<h4> This is the Task in Angular </h4> 
    <Button class = "btn btn-primary" (click) = "OnClick()" > Click me </Button> 


    <input [(ngModel)] = "userId" > 
    <input [(ngModel)] = "username" > 
    <input [(ngModel)] = "userrole" > 

    <Button class = "btn btn-primary" (click) = "OnClick(userId,username,userrole)" > Submit </Button> 

<div class="table-responsive" > 


<table class="table" style="width:100%"> 
    <tr> 
    <th>ID</th> 
    <th>Title</th> 
    <th>Body</th> 
    </tr> 

<tr *ngFor = "let task of tasklist.task"> 
    <td>{{task.UserID}}</td> 
    <td>{{task.UserName}}</td> 
    <td>{{task.body}}</td> 
    <td> <a class="btn btn-link" (click) = Edit(task) > Edit </a> </td> 
    </tr> 

</table> 

</div> 

    ` 
}) 

export class TasksComponent implements OnInit { 

    sample:string = "" 

    constructor(public tasklist: TaskService , private router: Router) { } 

    ngOnInit() { 

    this.tasklist.getItems(); 

    } 

    OnClick(userId,username,userrole) 
    { 
    debugger; 
    this.tasklist.postitems(userId,username,userrole); 
    } 

    Edit(value) 
    { 
    debugger; 
    this.router.navigate(['/others' , value]); 
    } 
} 

Answer 1

Глагол OPTIONS - это, вероятно, кросс-доменный запрос JavaScript, выполненный вашим браузером. ОПЦИИ являются частью предполетного запроса, который браузер выполняет, чтобы узнать, что поддерживается для междоменных запросов.

Попробуйте сделать тот же POST с расширителя Chrome Postman. В качестве расширения для Chrome он не соответствует тем же правилам CORS. Если это работает в Postman, тогда это проблема CORS, и вам нужно включить CORS.

Следуйте инструкциям здесь: .