2017-05-31 10 views
0

すべてのリクエスト(content-type:application/json)でうまく動作するcorsポリシーがあります。しかし、ファイルをアップロードしてコンテンツタイプを使用しようとすると、multipart/form-dataにエラーが発生します。AngularとASP WEB API COREを使用してファイルをアップロードしますか?

XMLHttpRequestはhttp://localhost:20377/api/postsをロードできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:4200'はアクセスできません。応答にはHTTPステータスコード500がありました。

これはmultipart/form-dataでは機能しませんが、application/jsonで動作する理由はわかりません。 ここでは、コードです:Startup.csで ポリシーの設定

services.AddCors(options => 
     { 
      options.AddPolicy("CorsPolicy", 
       builder => builder.AllowAnyOrigin() 
       .AllowAnyMethod() 
       .AllowAnyHeader() 
       .AllowCredentials()); 
     }); 

角度方法:ウェブAPIコアコントローラ

public createPost(title: string, body: string, file:File) { 
    const token = this.authService.getToken(); 
    let formData: FormData = new FormData(); 

    formData.append('File', file, file.name); 
    formData.append('Title', title); 
    formData.append('Body', body); 
    console.log(formData); 
    return this.http.post('http://localhost:20377/api/posts', formData, 
     {headers: new Headers({'Content-Type': 'multipart/form-data'})}) 
     .map(res => { 
      console.log(res); 
     }); 

[EnableCors("CorsPolicy")] 
    [HttpPost] 
    public IActionResult CreatePost([FromBody] PostCreate model) 
    { 
     return Ok(model.Body); 
    } 

答えて

0

解決

私の間違いでしたコントローラのActioでFormBodyデータを渡している場所n、Angularリクエストでヘッダーを渡さないでください。 は上変更する必要がありますする必要があります。

[HttpPost] 
    public IActionResult CreatePost([FromForm] PostCreate model) 
    { 
     return Ok(model); 
    } 

と角

return this.http.post('http://localhost:20377/api/posts', formData) 
     .map(res => { 
      console.log(res); 
関連する問題