Question

我想使用angular 2在我的asp.net web api上发布数据，但是我收到了这些错误。我无法弄清楚我的代码有什么问题。

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);
    }

Angular 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请求。 OPTIONS是浏览器执行的飞行前请求的一部分，用于查找跨域请求支持的内容。

尝试从Chrome扩展程序Postman进行相同的POST。作为Chrome的扩展，它不遵循相同的CORS规则。如果它在Postman中有效，则这是一个CORS问题，您需要启用CORS。

按照此处的说明操作：https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors。

使用Angular 2将数据发布到Asp.net web api

1 个答案: