fix: handle CORS preflight in reverse proxy during local dev

packages/app/src/cli/utilities/app/http-reverse-proxy.test.ts

@@ -55,6 +55,34 @@ describe.sequential.each(each)('http-reverse-proxy for %s', (protocol) => {
     })
   })
 
+  test('responds to CORS preflight OPTIONS with default headers', {retry: 2}, async ({ports, servers}) => {
+    const response = await fetch(`${protocol}://localhost:${ports.proxyPort}/path1/test`, {
+      method: 'OPTIONS',
+      headers: {
+        Origin: 'https://extensions.shopifycdn.com',
+        'Access-Control-Request-Method': 'GET',
+        'Access-Control-Request-Headers': 'Authorization',
+      },
+      agent,
+    })
+    expect(response.status).toBe(204)
+    expect(response.headers.get('access-control-allow-origin')).toBe('https://extensions.shopifycdn.com')
+    expect(response.headers.get('access-control-allow-methods')).toBe('GET')
+    expect(response.headers.get('access-control-allow-headers')).toBe('Authorization')
+    expect(response.headers.get('access-control-max-age')).toBe('86400')
+  })
+
+  test('responds to CORS preflight OPTIONS with defaults when no request headers', {retry: 2}, async ({ports, servers}) => {
+    const response = await fetch(`${protocol}://localhost:${ports.proxyPort}/path1/test`, {
+      method: 'OPTIONS',
+      agent,
+    })
+    expect(response.status).toBe(204)
+    expect(response.headers.get('access-control-allow-origin')).toBe('*')
+    expect(response.headers.get('access-control-allow-methods')).toBe('GET, POST, PUT, DELETE, PATCH, OPTIONS')
+    expect(response.headers.get('access-control-allow-headers')).toBe('Content-Type, Authorization')
+  })
+
   test('closes the server when aborted', {retry: 2}, async ({ports, servers}) => {
     servers.abortController.abort()
     // Try the assertion immediately, and if it fails, wait and retry

packages/app/src/cli/utilities/app/http-reverse-proxy.ts

@@ -70,6 +70,18 @@ function getProxyServerRequestListener(
   return function (req, res) {
     const target = match(rules, req)
     if (target) {
+      // Handle CORS preflight requests directly
+      // The proxy does not forward OPTIONS reliably, so we respond here
+      // using the headers requested by the client.
+      if (req.method === 'OPTIONS') {
+        res.writeHead(204, {
+          'Access-Control-Allow-Origin': req.headers['origin'] ?? '*',
+          'Access-Control-Allow-Methods': req.headers['access-control-request-method'] ?? 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+          'Access-Control-Allow-Headers': req.headers['access-control-request-headers'] ?? 'Content-Type, Authorization',
+          'Access-Control-Max-Age': '86400',
+        })
+        return res.end()
+      }
       return proxy.web(req, res, {target}, (err) => {
         useConcurrentOutputContext({outputPrefix: 'proxy', stripAnsi: false}, () => {
           const lastError = isAggregateError(err) ? err.errors[err.errors.length - 1] : undefined