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

Question

我正在尝试创建在博客上发布 cmets 的基本功能，使用 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 端创建的 cmets。

3. 使用 POSTMAN 拦截呼叫会产生以下结果：

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

似乎没有传输正文和标头。在调试器中，两者都被传递给后端 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();

感谢所有的cmets。他们让我不停地探索和尝试我不会想到的新事物（比如使用 IE）。

Answer 2

对于那些关心或像我一样不喜欢拥有完全宽松的 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")
});

我花了比它应该做的更多的时间来解决这个问题，所以如果它为其他人节省了一些时间，这篇文章是值得的:)

Answer 3

您想使用application/json 的content-type，但将正文作为字符串发送：let _body = JSON.stringify(newComment);!!

应该是：const _body = newComment;。