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
angular · Jun 20, 2023 · 5ae0018 · 5ae0018
1 parent 6f443a9
commit 5ae0018
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
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: {