title: How to add something to the body of request inside an Angular interceptor?
body: <p>Here I'm able to modify the header as there are multiple tutorials present regarding this feature but:</p>
  
  <pre><code>@Injectable()
  export class MyFirstInterceptor implements HttpInterceptor {
  
      constructor(private currentUserService: CurrentUserService) { }
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          console.log(JSON.stringify(req));
  
          const token: string = this.currentUserService.token;
  
          if (token) {
              req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
          }
  
          if (!req.headers.has('Content-Type')) {
              req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
          }
  
          req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
          return next.handle(req);
      }
  }
  </code></pre>
  
  <p>But in my case there's a token which I need to add the request body instead of the request header so is there any method to modify the body.</p>
  
  <blockquote>
    <p>Update: Mild Fuzz's method is working great for a simple post request
    but I'll like to add to query if it's a GET request and body if it
    allows to add a body. And most importantly it broke when I tried to
    send a form data. <code>...request.body</code> removes the form data and
    transforms it to a <code>JSON</code>object so my image is gone.</p>
  </blockquote>