Angular POST 从 ASP.NET Core Web API 返回 500 错误答案

【问题标题】：Angular POST returns 500 error from ASP.NET Core Web APIAngular POST 从 ASP.NET Core Web API 返回 500 错误
【发布时间】：2018-10-04 13:39:59
【问题描述】：

我将 data 从 Angular 客户端发布到 ASP.NET Core Web API。如果data 有像 ć,č,š 这样的拉丁欧洲字符，则返回 500 内部错误，否则返回 201。

这是data类：

export class FinalFormData {
    name: string;
    url: string;
    dateCreated: Date;
    tags: any[];
}

POST函数的数据处理函数：

this.data.postData(this.finalData)
    .subscribe(data => {
        this.finalData = data;
        this.router.navigate(["/"]);
    }, err => console.log(err));

发布数据的功能：

public postData(data: FinalFormData): Observable<FinalFormData> {
    return this.http.post<FinalFormData>("/api/links", data, {
        headers: new HttpHeaders({
            'Content-Type' : 'application/json; charset=utf-8'
        })
    });
}

网络 API

    [HttpPost("")]
    public async Task<IActionResult> Post([FromBody]FinalFormViewModel theLink)
    {
        if (ModelState.IsValid)
        {
            var newLink = new Links
            {
                UserName = User.Identity.Name,
                Url = theLink.Url,
                Name = theLink.Name,
                DateCreated = DateTime.UtcNow
            };
            //newLink.Name = _repository.GetTitle(newLink.Url);

            _repository.AddLink(newLink);
            _context.SaveChanges();
            Links link = _repository.GetLinkByName(newLink.Name);

            foreach (var tag in theLink.Tags)
            {
                var newTag = new Tags
                {
                    Name = tag
                };
                _repository.AddTag(link, newTag, newLink.UserName);
            }

            // Returning data

            var data = new FinalFormViewModel()
            {
                Name = newLink.Name,
                Url = newLink.Url,
                DateCreated = newLink.DateCreated,
                Tags = newLink.Tags.Select(t => t.Name).ToList()
            };
            if (await _repository.SaveChangesAsync())
            {
                return Created($"api/links/{theLink.Name}", data);
            }             
        }
        return BadRequest("Failed to save the link");
    }

在每种情况下在 Web API 中调试时，代码都达到return Created($"api/links/{theLink.Name}", data);，这意味着它返回 201 状态。

但如果像 č,ć,ž 这样的字符是 url 字符串的一部分，即使它返回 201，在浏览器中我会在控制台中收到错误消息：

"Http failure response for http://localhost:54105/api/links: 500 Internal Server Error"

在此之后订阅 Observable 将不会成功。在其他没有这些特殊字符的情况下，它可以正常工作。

网络响应：

编辑

我现在居然发现服务器错误：

InvalidOperationException: Invalid non-ASCII or control character in header: 0x0161

Microsoft.AspNetCore.Server.Kestrel.Internal.Http.FrameHeaders.ThrowInvalidHeaderCharacter(char ch)

【问题讨论】：

使用浏览器进入网页并检查内容类型。您正在使用：'Content-Type'：'application/json;字符集=utf-8'。该网页使用了不同类型的编码。
@jdweng 我在上面贴了图片。
您的错误可能在 return Created($"api/links/{theLink.Name}", data); 中。你确定 {theLink.Name} 有价值吗？
我想查看带有 Web 响应的标头，而不是带有 http 请求/响应的标头。看起来您正在使用提供分块模式的 http 1.1。您可能需要设置为流模式的 http 1.0。 201 响应是由于块模式，您将需要发送下一条块消息，否则您将超时。从未找到使用 httprequest 发送下一个块的方法。
@IgorDimchevski 您的提示实际上给了我解决方案。 theLink.Name 具有价值，但我不得不使用不包含非 ASCII 字符的 theLink.Url。现在工作正常。

标签： c# angular typescript http asp.net-core-webapi

【解决方案1】：

Angular 一次只能支持一种语言，所以如果你想从英语切换到拉丁语，你需要重新加载应用程序上下文..

更多详情在这里Angular 5 internationalization

【讨论】：

【解决方案2】：

jdweng 是对的。 UTF-8 不包含您提到的字符：http://www.utf8-chartable.de/

另一方面，ISO-8859-2 包括它们：https://www.terena.org/activities/multiling/ml-docs/iso-8859.html

如这里所说：https://stackoverflow.com/a/43164489/4770754

发送请求时包含 RequestOptionsArgs。

指定字段 responseType : ResponseContentType 里面请求选项参数。（ResponseContentType.ArrayBuffer 或 ResponseContentType.Blob)

使用 TextDecoder 或类似的东西来解码结果。

查看文档：

https://angular.io/api/http/Http

https://angular.io/api/http/RequestOptions

https://angular.io/api/http/ResponseContentType

更新：

或者你可以按照你说的做，而不是theLink.Name 使用theLink.Url，它不会包含非ASCII字符。

【讨论】：