From a126cbcf22d0341377e67bcabe01ad97d44bc8b7 Mon Sep 17 00:00:00 2001
From: Heo Sangmin <heo@mapiacompany.com>
Date: Tue, 20 Jun 2023 20:41:11 +0900
Subject: [PATCH] fix(http): use serializeBody to support JSON payload in
 FetchBackend (#50776) `HttpRequest.serializeBody` was used in HttpXhrBackend.
 `fetch` also needs to serialize request body.

Close #50775

PR Close #50776
---
 packages/common/http/src/fetch.ts       | 2 +-
 packages/common/http/test/fetch_spec.ts | 9 +++++++++
 packages/common/http/test/xhr_spec.ts   | 8 ++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/common/http/src/fetch.ts b/packages/common/http/src/fetch.ts
index 07c83968480..846a097e938 100644
--- a/packages/common/http/src/fetch.ts
+++ b/packages/common/http/src/fetch.ts
@@ -221,7 +221,7 @@ export class FetchBackend implements HttpBackend {
     }
 
     return {
-      body: req.body,
+      body: req.serializeBody(),
       method: req.method,
       headers,
       credentials,
diff --git a/packages/common/http/test/fetch_spec.ts b/packages/common/http/test/fetch_spec.ts
index 0a2d5185827..541f3c275c5 100644
--- a/packages/common/http/test/fetch_spec.ts
+++ b/packages/common/http/test/fetch_spec.ts
@@ -33,6 +33,10 @@ const TEST_POST = new HttpRequest('POST', '/test', 'some body', {
   responseType: 'text',
 });
 
+const TEST_POST_WITH_JSON_BODY = new HttpRequest('POST', '/test', {'some': 'body'}, {
+  responseType: 'text',
+});
+
 const XSSI_PREFIX = ')]}\'\n';
 
 describe('FetchBackend', async () => {
@@ -109,6 +113,11 @@ describe('FetchBackend', async () => {
     expect(fetchMock.request.body).toBe('some body');
   });
 
+  it('sets outgoing body correctly when request payload is json', () => {
+    callFetchAndFlush(TEST_POST_WITH_JSON_BODY);
+    expect(fetchMock.request.body).toBe('{"some":"body"}');
+  });
+
   it('sets outgoing headers, including default headers', () => {
     const post = TEST_POST.clone({
       setHeaders: {
diff --git a/packages/common/http/test/xhr_spec.ts b/packages/common/http/test/xhr_spec.ts
index 148626b108d..445d4282fa3 100644
--- a/packages/common/http/test/xhr_spec.ts
+++ b/packages/common/http/test/xhr_spec.ts
@@ -24,6 +24,10 @@ const TEST_POST = new HttpRequest('POST', '/test', 'some body', {
   responseType: 'text',
 });
 
+const TEST_POST_WITH_JSON_BODY = new HttpRequest('POST', '/test', {'some': 'body'}, {
+  responseType: 'text',
+});
+
 const XSSI_PREFIX = ')]}\'\n';
 
 {
@@ -49,6 +53,10 @@ const XSSI_PREFIX = ')]}\'\n';
       backend.handle(TEST_POST).subscribe();
       expect(factory.mock.body).toBe('some body');
     });
+    it('sets outgoing body correctly when request payload is json', () => {
+      backend.handle(TEST_POST_WITH_JSON_BODY).subscribe();
+      expect(factory.mock.body).toBe('{"some":"body"}');
+    });
     it('sets outgoing headers, including default headers', () => {
       const post = TEST_POST.clone({
         setHeaders: {