Angular HttpClient make GET request with JSON in the body

Question

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

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, Mar 15 '19 at 16:12
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, Mar 15 '19 at 16:15
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 https://stackoverflow.com/a/983458/1260204 — Igor, Mar 15 '19 at 16:22
https://github.com/angular/angular/issues/9927, browser does not support body in XHR GET — ABOS, Mar 15 '19 at 16:23

score 0 · Answer 1 · answered Sep 08 '19 at 18:35

0

Try to test with the content-type in your headers

From

'Content-Type': 'application/json'

to

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

answered Sep 08 '19 at 18:35

wintersa

202
1
2
9

score 0 · Answer 2 · answered Apr 10 '21 at 15:24

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

Angular HttpClient make GET request with JSON in the body

2 Answers2