ASP.Netコア1.1 Angular2 PUTリクエストがアクセス制御元なしなし

Question

私のASP.Net Core 1.1では。バックエンド私は次のようにCORSを有効にしました：

public void ConfigureServices(IServiceCollection services) 
{ 
    // Add framework services. 
    services.AddDbContext<WebAPIDataContext>(options => 
    { 
     options.UseMySql(Configuration.GetConnectionString("MysqlConnection")); 
    }); 
    services.AddScoped<IProfileRepository, ProfileRepository>(); 
    services.AddScoped<IUser_TaskRepository, User_TaskRepository>(); 

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

    services.AddMvc(); 

    services.AddSwaggerGen(c => 
    { 
     c.SwaggerDoc("v1", new Info { Title = "My API", Version = "v1" }); 
    }); 


} 

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
    loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
    loggerFactory.AddDebug(); 

    // global policy - assign here or on each controller 
    app.UseCors("CorsPolicy"); 


    app.UseMvc(); 

    // Enable middleware to serve generated Swagger as a JSON endpoint. 
    app.UseSwagger(); 

    // Enable middleware to serve swagger-ui (HTML, JS, CSS etc.), specifying the Swagger JSON endpoint. 
    app.UseSwaggerUI(c => 
    { 
     c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1"); 
    }); 


} 

私のangular2フロントエンドから、私はPOSTとPUTリクエストをしています。 POSTは成功したがPUTは私に何'Access-Control-Allow-Origin' header is present on the requested resource.を与えない障害が発生した彼らは、次のとおりです。

private base_url = 'http://localhost:4783/api/'; 

    constructor (private http: Http) {} 

    createProfile(profile: ProfileModel): Observable<ProfileModel[]>{ 

    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.base_url + 'Profile', profile , options) 
    .map(this.extractData) 
    .catch(this.handleError); 
    } 
    updateProfile(profile: ProfileModel, profileId: number): Observable<ProfileModel[]>{ 

    console.log(profile, profileId) 

    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' }); 
    let options = new RequestOptions({ headers: headers}); 

    return this.http.put(this.base_url + 'Profile' + '/' + profileId, profile , options) 
    .map(this.extractData) 
    .catch(this.handleError); 
    } 

私が間違って何をしているのですか？

Answer 1

最初の手順は、実際にPUTが失敗した場合、またはOPTIONSリクエスト（ブラウザプリフライト）の場合はデバッグコンソールを確認することです。 OPTIONSが問題の場合は、バックエンドで対応する必要があります。私はasp.netのコアには専門家だが、WEBAPIバックエンドであなたがglobal.asax.csでこれを行う必要があります：

protected void Application_BeginRequest() 
    { 
     if (Request.HttpMethod == "OPTIONS") 
     { 
      Response.StatusCode = (int)HttpStatusCode.OK; 
      Response.AppendHeader("Access-Control-Allow-Origin", Request.Headers.GetValues("Origin")[0]); 
      Response.AddHeader("Access-Control-Allow-Headers", "content-type, accept"); 
      Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); 
      Response.AppendHeader("Access-Control-Allow-Credentials", "true"); 
      Response.End(); 
     } 
    } 

OPTIONSがあなたの問題ではない場合、あなたは正しいを置くことをdoublecheckあなたの電話に入力してください。あなたがコールのために必要なヘッダ/パラメータを混乱させた場合、このエラーが発生することがよくあります（これは非常に混乱する可能性があります）。