angular - 使用 Angular2 到 ASP.NET CORE API 的 http.post 失败

Question

我正在尝试创建一种在博客上发表评论的基本功能，但使用 Angular2 向我的 API 发出 POST 请求时出现以下错误:

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 的 GET 命令工作正常。我可以阅读我之前在 API 端创建的评论。

3. 使用 POSTMAN 拦截调用会产生以下结果:

   

   

   如果我通过将“文本”更改为 json 并粘贴到模型中来修改 POSTMAN 请求，它可以正常工作。它调用 API 的“Post”方法并返回 200 和 json 文本“true”。见下文。

   

看起来正文和 header 没有传输。在调试器中，两者都传递给后端 Angular2 代码:

按照下面的建议，这是开发工具屏幕截图。显示与 POSTMAN 几乎相同的内容。

Answer 1

它是一个 CORS 问题。 :/

简而言之，我的 ASP.NET CORE startup.cs 有“builder.AllowAnyOrigin”，仅此还不够。它还需要“builder.AllowAnyMethod”来说明 Firefox/Google 的 OPTION 方法。这个博客不错: https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas

详细信息:

正如我上面提到的，我在 ASP.NET CORE 中的 CORS 是:

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

并将我的 API 的 startup.cs 文件修改为:

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

        });

然后(也在 startup.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)。