title: Angular HTTP Post Body Not Sending
body: <p>I'm trying to replicate a successful Postman request that has a single header and a body that is:
  [{"attrId":629,"value":["1000"],"unitValue":1,"minValue":"","maxValue":""}]</p>
  
  <pre><code>getData() {
  
    const data = [{'attrId': 629, 'value': ['1000'], 'unitValue': 1, 'minValue': '', 'maxValue': ''}];
  
    this.http
      .post('https://jsonplaceholder.typicode.com/posts', data, {
        headers: new HttpHeaders().set('Content-Type', 'application/json')
      })
      .subscribe(
        response =&gt; console.log(response.toString()), // Success path
              error =&gt; this.handleError(error) // error path
      );
    }
  
  private handleError(error: HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
   // return an observable with a user-facing error message
    // return throwError(
    //   'Something bad happened; please try again later.');
  }
  </code></pre>
  
  <p>I'm getting a 404 response from the server.  I feel like I'm not transmitting the something correctly but it looks ok to me. What's also weird is I don't see anything being sent in the network panel of Chrome dev tools.  The only thing in the console is:</p>
  
  <p>Backend returned code 404, body was: undefined</p>
  
  <p>What am I missing?</p>
  
  <p><a href="https://i.stack.imgur.com/xEvD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xEvD8.png" alt="Postman request"></a></p>
  
  <p>Network tab</p>
  
  <p><a href="https://i.stack.imgur.com/QI04s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QI04s.png" alt="Network"></a></p>
  
  <p>Console tab</p>
  
  <p><a href="https://i.stack.imgur.com/wRi4x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wRi4x.png" alt="Console"></a></p>
  
  <p>I am new to Angular so I could be missing something obvious. The server is pre-existing and I don't have access to it. Edit: I changed to a placeholder REST api that I could test from and got the exact same issue so it's clearly a problem with my code as opposed to the backend. 
  <a href="https://jsonplaceholder.typicode.com/" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/</a></p>