Angular HttpClient make GET request with JSON in the body

0
votes

I am working on an Angular client application and a ASP.NET Core Web API backend, and I'm running into a problem trying to get a call to work from Angular that seems to work fine from Postman.

Typescript code:

 exportScript(commands: ScriptCommand[]) {
    this.http.post(this.baseUrl + 'api/ScriptCommands/GenerateScript', JSON.stringify(this.scriptCommands)).subscribe();
  }

C# API call:

    [HttpGet]
    [Route("api/ScriptCommands/GenerateScript")]
    public IActionResult GenerateScript([FromBody]List<ScriptCommandViewModel> commands)
    {
        var mappedCommands = MapCommands(commands);
        var stream = ProcessCommands(mappedCommands);
        return File(stream, "application/xml", "generatedScript.xml");
    }

When I use the Angular call, I get a 400 Bad Request back, but if I copy the JSON-stringified scriptCommand list into the body of a Postman request, it works just fine.

Thanks for the help, everyone!

UPDATE: Changed Typescript code - I still get an HTTP 400 Bad Request response, but my Network tab in Chrome shows this in the Request headers - is the content-type being 'text/plain' the issue?

Accept: application/json, text/plain, */*
Content-Type: text/plain
Origin: http://localhost:4200
Referer: http://localhost:4200/createScript
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
3
angularasp.net-web-api2
why didn't you change from get to post method? - Hien Nguyen
Http Get does not support a message body. The only way to send data with http get is using the URI or Http Header (which also covers cookies). If you are wanting to send json I would switch your get to a post. - Igor
I would use POST, but I'm having a separate CORS issue with POST requests on my API. And if HTTP Get doesn't support a message body, how does Postman do it? - Riddari
I stand corrected, apparantly you can but I do not think that angular has any way to do this. The params are sent as url query string parameters in the http get call. see also stackoverflow.com/a/983458/1260204 - Igor
github.com/angular/angular/issues/9927, browser does not support body in XHR GET - ABOS

3 Answers

0
votes

Try to test with the content-type in your headers

From

'Content-Type': 'application/json'

to

'Content-Type': 'application/json;charset=utf-8'
0
votes

Get request send data by appending it in request url, so if you are having a json body like {"page":1,"search":"new products"}. To send this data in get request you can use below code.

get(path: string, params: any) {
    return this._http.get(this._baseUrl + path, { params: params })
      .pipe(timeout(CONST.API_TIMEOUT));
  }

This will is create request url like (can be verified in console in network tab)

http://localhost:5003/api/auth/test?page=1&search=new products
-2
votes

I think that .append works a little bit different as we would think. Append returns the appended HttpParams. Try this: 

 exportScript(commands: ScriptCommand[]) {
    let httpParams = new HttpParams();
    httpParams  = httpParams.append("commands", JSON.stringify(this.scriptCommands));
    this.http.get(this.baseUrl + 'api/ScriptCommands/GenerateScript', { params: httpParams }).subscribe();
  }