Merge pull request #3969 from Shopify/allow-cors-graphiql

Allow CORS for checking if GraphiQL is running
Shopify · Jun 4, 2024 · 053d71b · 053d71b
2 parents 8f225ad + 5f10367
commit 053d71b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/new-hats-sit.md b/.changeset/new-hats-sit.md
@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Allow CORS to check if local GraphiQL is running
diff --git a/packages/app/src/cli/services/dev/graphiql/server.ts b/packages/app/src/cli/services/dev/graphiql/server.ts
@@ -22,6 +22,16 @@ class TokenRefreshError extends AbortError {
   }
 }
 
+function corsMiddleware(_req: express.Request, res: express.Response, next: (err?: Error) => unknown) {
+  res.setHeader('Access-Control-Allow-Origin', '*')
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
+  res.setHeader(
+    'Access-Control-Allow-Headers',
+    'Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, ngrok-skip-browser-warning',
+  )
+  next()
+}
+
 interface SetupGraphiQLServerOptions {
   stdout: Writable
   port: number
@@ -85,7 +95,7 @@ export function setupGraphiQLServer({
     }
   }
 
-  app.get('/graphiql/ping', (_req, res) => {
+  app.get('/graphiql/ping', corsMiddleware, (_req, res) => {
     res.send('pong')
   })