[3.68] Fix cart requests in the local proxy to avoid 401-Unauthorized errors

.changeset/six-bugs-design.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix cart requests in the local proxy to avoid 401-Unauthorized errors

packages/theme/src/cli/utilities/theme-environment/proxy.test.ts

@@ -1,14 +1,19 @@
-import {getProxyStorefrontHeaders, injectCdnProxy, patchRenderingResponse} from './proxy.js'
+import {canProxyRequest, getProxyStorefrontHeaders, injectCdnProxy, patchRenderingResponse} from './proxy.js'
 import {describe, test, expect} from 'vitest'
 import {createEvent} from 'h3'
 import {Response as NodeResponse} from '@shopify/cli-kit/node/http'
 import {IncomingMessage, ServerResponse} from 'node:http'
 import {Socket} from 'node:net'
 import type {DevServerContext} from './types.js'
 
-function createH3Event() {
+function createH3Event(method = 'GET', path = '/', headers = {}) {
   const req = new IncomingMessage(new Socket())
   const res = new ServerResponse(req)
+
+  req.method = method
+  req.url = path
+  req.headers = headers
+
   return createEvent(req, res)
 }
 
@@ -218,4 +223,51 @@ describe('dev proxy', () => {
       `)
     })
   })
+
+  describe('canProxyRequest', () => {
+    test('should proxy non-GET requests', () => {
+      const event = createH3Event('POST', '/some-path.html')
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should proxy Cart requests as they are not supported by the SFR client', () => {
+      const event = createH3Event('GET', '/cart/some-path')
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should proxy CDN requests', () => {
+      const event = createH3Event('GET', '/cdn/some-path')
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should proxy CDN requests for extensions', () => {
+      const event = createH3Event('GET', '/ext/cdn/some-path')
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should proxy requests with file extensions', () => {
+      const event = createH3Event('GET', '/some-path.js')
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should proxy requests with a non-default accept header', () => {
+      const event = createH3Event('GET', '/some-path', {accept: 'application/json'})
+      expect(canProxyRequest(event)).toBe(true)
+    })
+
+    test('should not proxy requests with a default accept header and no extension, allowing them to be rendered by the SFR client', () => {
+      const event = createH3Event('GET', '/some-path', {accept: '*/*'})
+      expect(canProxyRequest(event)).toBe(false)
+    })
+
+    test('should not proxy HTML requests (based on the extension), allowing them to be rendered by the SFR client', () => {
+      const event = createH3Event('GET', '/some-path.html')
+      expect(canProxyRequest(event)).toBe(false)
+    })
+
+    test('should not proxy HTML requests (based on the "accept" header), allowing them to be rendered by the SFR client', () => {
+      const event = createH3Event('GET', '/some-path', {accept: 'text/html'})
+      expect(canProxyRequest(event)).toBe(false)
+    })
+  })
 })

packages/theme/src/cli/utilities/theme-environment/proxy.ts

@@ -21,6 +21,7 @@ import type {Theme} from '@shopify/cli-kit/node/themes/types'
 import type {Response as NodeResponse} from '@shopify/cli-kit/node/http'
 import type {DevServerContext} from './types.js'
 
+const CART_PREFIX = '/cart/'
 const VANITY_CDN_PREFIX = '/cdn/'
 const EXTENSION_CDN_PREFIX = '/ext/cdn/'
 const IGNORED_ENDPOINTS = [
@@ -62,13 +63,15 @@ export function getProxyHandler(_theme: Theme, ctx: DevServerContext) {
  * | /cdn/...          |                    | Proxy    |
  * | /ext/cdn/...      |                    | Proxy    |
  * | /.../file.js      |                    | Proxy    |
+ * | /cart/...         |                    | Proxy    |
  * | /payments/config  | application/json   | Proxy    |
  * | /search/suggest   | * / *              | No proxy |
  * | /.../index.html   |                    | No Proxy |
  *
  */
-function canProxyRequest(event: H3Event) {
+export function canProxyRequest(event: H3Event) {
   if (event.method !== 'GET') return true
+  if (event.path.startsWith(CART_PREFIX)) return true
   if (event.path.startsWith(VANITY_CDN_PREFIX)) return true
   if (event.path.startsWith(EXTENSION_CDN_PREFIX)) return true