Angular2 with ASP.NET Core CORSは、POST要求を送信する際に問題が発生します。

Question

Angular 2サービス経由でPOSTリクエストをASP.NET Core APIに送信する際に問題が発生します。

"XMLHttpRequestは、http://localhost:51014/api/sitesをロードできません。アクセス制御許可の原点は、要求されたリソースに存在しません。" http://localhost:3000 "の発信元はアクセスできませんでした。 HTTPステータスコード500。

GETリクエストでこのエラーが表示されず、CORS設定が正しくサーバー側にあります。

Startup.cs

public void ConfigureServices(IServiceCollection services) 
    { 
     ... 

     services.AddCors(); 
     services.AddMvc();    

     .... 
    } 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
    { 
     ... 

     app.UseCors(builder => 
      builder.WithOrigins("http://localhost:3000") 
       .AllowAnyHeader() 
       .AllowAnyMethod()); 

     app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Home}/{action=Index}/{id?}"); 
     }); 

    } 

SitesContoller.cs

// POST: api/Sites 
    [HttpPost] 
    public async Task<IActionResult> PostSite([FromBody] Site site) 
    { 
     if (!ModelState.IsValid) 
     { 
      return BadRequest(ModelState); 
     } 

     _context.Sites.Add(site); 
     try 
     { 
      await _context.SaveChangesAsync(); 
     } 
     catch (DbUpdateException) 
     { 
      if (SiteExists(site.Id)) 
      { 
       return new StatusCodeResult(StatusCodes.Status409Conflict); 
      } 
      else 
      { 
       throw; 
      } 
     } 

     return CreatedAtAction("GetSite", new { id = site.Id }, site); 
    } 

マイ角度2サービス：

site.service.tsがスニペット

public createSite(site: Site): Observable<Site> { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(site); 

    return this.http 
     .post(this.apiUrl + 'sites', { body }, options) 
     .map((res: Response) => res.json()); 
} 

Answer 1

SiteControllerクラスにEnableCors属性を追加する必要があります。この

[EnableCors(origins: "http://<SOME_SITE>", headers: "*", methods: "*")] 
public class SiteController { 
..... 
} 

のように、このような場合は、あなたのコードスニペットから言うことはできません。このlink

を参照してください、あなたがそれを必要がありますビット。