Angular 2を使用してAsp.net web apiにデータを投稿

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コード

////////////////////// ////////////////////////////////////// Service ///////////////////////////////// //////////////////////////////////////////////

@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リクエストに由来しています。 OPTIONSは、クロスドメインリクエストでサポートされているものを見つけるためにブラウザが実行する飛行前リクエストの一部です。

Chrome拡張機能Postmanから同じPOSTを作成してください。 Chromeの拡張機能として、同じCORSルールに従っていません。それが郵便配達で働くならば、これはCORSの問題であり、CORSを有効にする必要があります。

こちらの手順はに従ってください。