fix(http): use serializeBody to support JSON payload in FetchBackend (#50776)

leo6104 · AndrewKushnir · commit a126cbcf22d0 · 2023-06-20T13:31:25.000-07:00
`HttpRequest.serializeBody` was used in HttpXhrBackend. `fetch` also needs to serialize request body. Close #50775 PR Close #50776
diff --git 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
@@ -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
@@ -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: {

Original file line number	Diff line number	Diff line change
`@@ -221,7 +221,7 @@ export class FetchBackend implements HttpBackend {`
`221`	`221`	`}`
`222`	`222`
`223`	`223`	`return {`
`224`		`- body: req.body,`
	`224`	`+ body: req.serializeBody(),`
`225`	`225`	`method: req.method,`
`226`	`226`	`headers,`
`227`	`227`	`credentials,`