Merge pull request #6156 from Shopify/fix-json-content-type-bug

EvilGenius13 · web-flow · commit 78b1d3e7dcfa · 2025-07-25T18:11:43.000Z
Fix: JSON endpoints return correct application/json content-type in theme dev
diff --git a/.changeset/five-points-vanish.md b/.changeset/five-points-vanish.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fixed issue with json files being returned as html/text content type in theme dev
diff --git a/packages/theme/src/cli/utilities/theme-environment/proxy.test.ts b/packages/theme/src/cli/utilities/theme-environment/proxy.test.ts
@@ -236,6 +236,17 @@ describe('dev proxy', () => {
       expect(canProxyRequest(event)).toBeTruthy()
     })
 
+    test('should proxy cart.json and other cart-related JSON endpoints', () => {
+      const cartJsonEvent = createH3Event('GET', '/cart.json')
+      expect(canProxyRequest(cartJsonEvent)).toBeTruthy()
+
+      const collectionsJsonEvent = createH3Event('GET', '/collections.json')
+      expect(canProxyRequest(collectionsJsonEvent)).toBeTruthy()
+
+      const productsJsonEvent = createH3Event('GET', '/products/handle.json')
+      expect(canProxyRequest(productsJsonEvent)).toBeTruthy()
+    })
+
     test('should proxy Checkout requests as they are not supported by the SFR client', () => {
       const event = createH3Event('GET', '/checkouts/xyz')
       expect(canProxyRequest(event)).toBeTruthy()
diff --git a/packages/theme/src/cli/utilities/theme-environment/proxy.ts b/packages/theme/src/cli/utilities/theme-environment/proxy.ts
@@ -173,8 +173,14 @@ export async function patchRenderingResponse(
 ): Promise<Response> {
   const response = patchProxiedResponseHeaders(ctx, rawResponse)
 
-  // Ensure the content type indicates UTF-8 charset:
-  response.headers.set('content-type', 'text/html; charset=utf-8')
+  // Only set HTML content-type for actual HTML responses, preserve JSON content-type:
+  const originalContentType = rawResponse.headers.get('content-type')
+  const isJsonResponse = originalContentType?.includes('application/json')
+
+  if (!isJsonResponse) {
+    // Ensure the content type indicates UTF-8 charset for HTML responses:
+    response.headers.set('content-type', 'text/html; charset=utf-8')
+  }
 
   let html = await response.text()
   html = injectCdnProxy(html, ctx)
diff --git a/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.test.ts b/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.test.ts
@@ -43,7 +43,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
-    expect(response.headers.get('Content-Type')).toBeNull()
+    expect(response.headers.get('Content-Type')).toEqual('application/json')
     expect(response.headers.get('something')).toEqual('else')
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0',
@@ -59,6 +59,36 @@ describe('render', () => {
     )
   })
 
+  test('preserves Content-Type header for JSON responses', async () => {
+    // Given
+    vi.mocked(fetch).mockResolvedValue(
+      new Response('{"test": "data"}', {headers: {'Content-Type': 'application/json', something: 'else'}}),
+    )
+
+    // When
+    const response = await render(session, context)
+
+    // Then
+    expect(response.status).toEqual(200)
+    expect(response.headers.get('Content-Type')).toEqual('application/json')
+    expect(response.headers.get('something')).toEqual('else')
+  })
+
+  test('removes Content-Type header for non-JSON responses', async () => {
+    // Given
+    vi.mocked(fetch).mockResolvedValue(
+      new Response('<html></html>', {headers: {'Content-Type': 'text/html', something: 'else'}}),
+    )
+
+    // When
+    const response = await render(session, context)
+
+    // Then
+    expect(response.status).toEqual(200)
+    expect(response.headers.get('Content-Type')).toBeNull()
+    expect(response.headers.get('something')).toEqual('else')
+  })
+
   test('renders using theme access API', async () => {
     // Given
     vi.mocked(fetch).mockResolvedValue(
@@ -71,7 +101,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
-    expect(response.headers.get('Content-Type')).toBeNull()
+    expect(response.headers.get('Content-Type')).toEqual('application/json')
     expect(response.headers.get('something')).toEqual('else')
     expect(fetch).toHaveBeenCalledWith(
       'https://theme-kit-access.shopifyapps.com/cli/sfr/products/1?_fd=0&pb=0',
diff --git a/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.ts b/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.ts
@@ -50,10 +50,16 @@ export async function render(session: DevServerSession, context: DevServerRender
   /**
    * Theme Access app requests return the 'application/json' content type.
    * However, patched renderings will never patch JSON requests; so we're
-   * consistently discarding the content type.
+   * only discarding the content type for non-JSON responses that will be patched.
    */
+  const contentType = response.headers.get('Content-Type')
+  const isJsonResponse = contentType?.includes('application/json')
+
   response = new Response(response.body, response)
-  response.headers.delete('Content-Type')
+
+  if (!isJsonResponse) {
+    response.headers.delete('Content-Type')
+  }
 
   return response
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/theme': patch
 +---
++
 +Fixed issue with json files being returned as html/text content type in theme dev