Pass the result of Asp.net Core API to Angular

Question

'

I'm studying ASP.NET Core and Angular.

I already created the API (ASP.NET Core). And I was able to call that api using Angular.

This is the controller

[Route("api/[controller]")]
[ApiController]
public class XmlBeautifierController : ControllerBase
{
    private readonly IXmlBeautifier _xmlBeautifier;
    public  XmlBeautifierController(IXmlBeautifier xmlBeautifier)
    {
        _xmlBeautifier = xmlBeautifier;
    }
    [HttpPost("XmlBeautifier")]
    public string XmlBeautifier([FromBody] XmlData data)
    {
        try
        {

            Console.WriteLine(data);

            Console.WriteLine("Parsed XML Data: " + _xmlBeautifier.Beautify(data.Xml));
            //read the content

            return _xmlBeautifier.Beautify(data.Xml);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
            Console.WriteLine(ex.StackTrace);
            throw ex;
        }
    }
}

I checked that the api is called properly. But when I want to read the result of the controller. The problem comes in. This is the error which I don't understand

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad

I've read some tutorials and it says that in order to read the result is by something like this

onSubmit() {

    // TODO: Use EventEmitter with form value
    console.warn(this.xmlForm.value);
    this.http.post('http://localhost:5000/api/XmlBeautifier/XmlBeautifier', { Xml: this.xmlForm.controls['XmlData'].value })
    .subscribe(res => {
      console.log(res);
      alert('SUCCESS !!');
    })
  }

What is wrong with my code?

Kirk Larkin · Accepted Answer · 2019-07-28 07:24:39Z

The Web API, by default, accepts JSON. The problem is...this is what the sent json object looks like:

{ Xml: <doc><nodes><node>content</node><node>more content</node></nodes></doc> }

What you'll need to do is:

Wrap your XmlData in quotes (e.g. `{ Xml: "'" + this.xmlForm.controls['XmlData'].value + "'" }')
Ensure that there's no funky quotes being supplied - you may want to escape your non-alphanumeric characters client-side, then unescape them server-side.
Your controller should accept XmlElement (instead of XmlData)
Update your onSubmit() to look like the following:

import { HttpHeaders } from '@angular/common/http';

onSubmit() {

    const httpOptions = {
      headers: new HttpHeaders({
        'Accept', 'application/xml,application/xhtml+xml,text/html'
      })
    };

    // TODO: Use EventEmitter with form value
    console.warn(this.xmlForm.value);
    this.http.post('http://localhost:5000/api/XmlBeautifier/XmlBeautifier', { Xml: this.xmlForm.controls['XmlData'].value }, httpOptions)
    .subscribe(res => {
      console.log(res);
      alert('SUCCESS !!');
    })
  }

This tells the server to respond to you in XML rather than JSON.

Finally, depending on how your overall API is configured, take a look here for a couple of other configuration options in your server-side app.

WARNING: Submitting freeform xHTML is very dangerous which is why many firewalls/application gateways that have OWASP enabled will block such content. I would wrap your content (or escape it like I recommended) somehow to prevent warnings (or blocks) within your firewall.

Collectives™ on Stack Overflow

Pass the result of Asp.net Core API to Angular

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related