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

Question

I'm posting data from Angular client to ASP.NET Core Web API. In case when data has latin europe chars like ć,č,š it returns 500 Internal error, otherwise it return 201.

This is data class:

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

Function for handling data for POST function:

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

Function for posting data:

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

Web 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");
    }

When debugging in Web API in every case code reach return Created($"api/links/{theLink.Name}", data); which means it returns 201 status.

But in case when those chars like č,ć,ž are part of url string even though it returs 201, in browser I get the error in console with message:

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

After this subscribing to an Observable won't reach success block. In other cases without those special chars it works fine.

Network response:

EDIT

I actually now find the server error:

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

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

Answer 1

Angular can only support a single language at a time, so if u wanna switch from English to Latin, you need to reload the application context..

More details here Angular 5 internationalization

Answer 2

jdweng is right. UTF-8 does not include the characters you mention : http://www.utf8-chartable.de/

ISO-8859-2, on the other hand, includes them : https://www.terena.org/activities/multiling/ml-docs/iso-8859.html

So as said here : https://stackoverflow.com/a/43164489/4770754

Include the RequestOptionsArgs when you send request.

Specify the field responseType : ResponseContentType inside RequestOptionsArgs. (Either ResponseContentType.ArrayBuffer or ResponseContentType.Blob)

Use TextDecoder or something similar to decode the result.

See the docs:

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

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

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

UPDATE :

or you could do as you said and instead of theLink.Name use theLink.Url which won't contains non-ASCII chars.