Failed http.post с Angular2 для ASP.NET CORE API

Question

Я пытаюсь создать базовую возможность размещать комментарии на блоге, получить следующее сообщение об ошибке для запроса POST к моему API с помощью Angular2:

Error in comment.service: Response with status: 0 for URL: null 

форма кнопки отправки вызывает мой комментарий компонент, comment-form.component.ts

onSubmit() { 
    this.submitted = true; 

    //TODO: replace hardcoded with form fields 
    this.newComment = new CommentInputViewModel("temp", 0, 0, true, "null", 0); 
    this.newComment.text = this.model.text; 
    this.newComment.ownerID = 6; 
    this.newComment.parentID = 1305; 
    this.newComment.score = 0.5; 
    this.newComment.isFact = true; 
    this.newComment.sideID = 1073; 
    this.newComment.sideText = "For"; 


    this._postService.postNewComment(this.newComment) 
      .subscribe(comment => this.returnedComment = comment, 
       error => this.errorMessage = <any>error); 
     console.log("commentList.component - After onSubmit:" + this.returnedComment); 
    return JSON.stringify(this.model); 
} 

Который называет мою службу к API:

postNewComment(newComment: IComment): Observable<IComment>{ 
    let _body = JSON.stringify(newComment); 
    let _headers = new Headers(); 
    _headers.append('Content-Type', 'application/json'); 
    let _options = new RequestOptions({ headers: _headers }); 

    return this._http.post(this._postNewCommentUrl, _body, _options) 
         .map((res:Response) => res.json().value) 
         .catch(this.handleError); 
} 

В результате на стороне API, из VS2015 отладчика не ошибка 204 (без содержания):

] 1

Что я пробовал:

1. В основном исключено Вопросы COR. Большинство других вопросов Angular2 POST здесь были проблемами COR. Поскольку запрос ударяет моего отладчика Visual Studio и возвращает 204, я не думаю, что это так. Плюс мой CORE startup.cs имеет «builder.AllowAnyOrigin();.. Как политика

2. команды получают от одной службы к тому же API, работает нормально, я могу прочитать комментарии я ранее созданные на стороне API

.

3. Перехватив вызов почтальона производит следующее:

   

   

   Если я изменить запрос почтальона путем изменения «текст» для json и вставка в модель, он отлично работает. Он обращается к методу «Почта» API и возвращает 200, а текст json - «true». Смотри ниже.

   

Это выглядит как тело и заголовки не передаются. В отладчике, как получить передается фоновым Angular2 код:

В соответствии с рекомендациями ниже, вот Dev-инструменты ScreenCap. Показывает почти то же, что и POSTMAN.

Answer 1

был проблема CORS. :/

Короче говоря, у моего ASP.NET CORE startup.cs был «builder.AllowAnyOrigin», и этого было недостаточно. Это также потребовало «builder.AllowAnyMethod» для учета метода OPTION Firefox/Google.Этот блог хорош: https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas

деталь:

Как я уже упоминал выше, мои CORS в ASP.NET керн:

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

     }); 

Я использую Firefox и Chrome. Я попробовал это в IE, и это сработало. Оказывается, IE не выполняет предполетный запрос OPTION, который является единственным запросом, который отклоняется.

документации ASP.NET CORE на CORS слабый, поэтому я использовал этот блог: https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas

и модифицированный startup.cs моего API, файл следующим образом:

// in the ConfigureServices(IServiceCollection services) method 
services.AddCors(options => 
     { 
      options.AddPolicy("CorsDevPolicy", builder => 
      { 
       builder.AllowAnyOrigin() 
         .AllowAnyMethod() 
         .AllowAnyHeader() 
         .AllowCredentials(); 
      }); 

     }); 

А затем (также в запуске .cs):

public async void Configure(IApplicationBuilder app, ...... 
    { 
     // other unrelated code 

     app.UseCors("CorsDevPolicy"); 
     // other unrelated code. 

     // app.UseCors must come before this: 
     app.UseMvc(); 

Цените все комментарии. Они заставляли меня трястись и пробовать новые вещи, о которых я бы не подумал (например, использовать IE).

Answer 2

Вы хотите использовать content-type из application/json, но посылая тело в виде строки: let _body = JSON.stringify(newComment); !!

Должно быть: const _body = newComment;.

Answer 3

Для тех, кто заботится, или тех, кто, как и я, не наслаждался идеей иметь полностью разрешительную политику CORS.

Как уже говорилось, проблема связана с проблемой CORS, а заголовки CORS указывают вам в правильном направлении, хотя и тонким способом.

В обоих экране почтальона и средство разработки захватывает выше, они показывают OPTIONS адресации запроса к серверу с заголовками:

Access-Control-Request-Method: POST  
Access-Control-Request-Headers: content-type 

По существу с просьбой, если заголовок типа содержимого является приемлемым по запросам POST от указанного происхождения. Поскольку в политике CORS не были установлены параметры .AllowAnyHeader() или .WithHeaders («content-type»), сервер не отвечает положительно, и фактический POST никогда не отправляется браузером.

Моя последняя политика выглядела примерно так:

appBuilder.UseCors(options => 
{ 
    options.WithOrigins("http://myorigin") 
     .WithMethods("POST") 
     .WithHeaders("content-type") 
}); 

Он взял меня за тонну больше времени, чем это должно быть сделано, чтобы понять это так, если это экономит кто-то еще какое-то время эта запись стоит :)