Handle custom-domain Gradio CORS preflights

app.py

@@ -385,7 +385,6 @@ logger.info("All routes configured")
 
 # Mount the REST API on /api
 from fastapi import FastAPI, Request
-from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import RedirectResponse
 from starlette.middleware.base import BaseHTTPMiddleware
 from api import api_app
@@ -407,30 +406,78 @@ class RootRedirectMiddleware(BaseHTTPMiddleware):
 
 
 class StringifiedGradioJSONMiddleware:
-    """Normalize JSON bodies double-encoded by the custom-domain proxy.
+    """Normalize custom-domain Gradio requests before they reach Gradio.
 
     Requests sent through index.openhands.dev can arrive at Gradio as a JSON
     string containing the real request object, which makes FastAPI validation
     reject interactive callbacks with 422. Direct HF Space traffic already sends
     proper JSON objects, so this only rewrites bodies that decode to strings.
+
+    The custom domain also loads the Gradio frontend from Vercel while
+    window.gradio_config.root points to the hf.space runtime. Chrome therefore
+    requires successful credentialed CORS preflights for queue and heartbeat
+    endpoints.
     """
 
+    CUSTOM_DOMAIN_ORIGIN = "https://index.openhands.dev"
+
     def __init__(self, app):
         self.app = app
 
     async def __call__(self, scope, receive, send):
+        origin = None
+        if scope["type"] == "http":
+            headers = {
+                key.decode("latin-1").lower(): value.decode("latin-1")
+                for key, value in scope.get("headers", [])
+            }
+            origin = headers.get("origin")
+
+        should_apply_cors = (
+            scope["type"] == "http"
+            and scope.get("path", "").startswith("/gradio_api/")
+            and origin == self.CUSTOM_DOMAIN_ORIGIN
+        )
+
+        if should_apply_cors:
+            cors_headers = [
+                (b"access-control-allow-origin", self.CUSTOM_DOMAIN_ORIGIN.encode("latin-1")),
+                (b"access-control-allow-credentials", b"true"),
+                (b"access-control-allow-methods", b"DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT"),
+                (b"access-control-allow-headers", b"*"),
+                (b"access-control-expose-headers", b"*"),
+                (b"vary", b"Origin"),
+            ]
+
+            if scope.get("method") == "OPTIONS":
+                await send({
+                    "type": "http.response.start",
+                    "status": 200,
+                    "headers": cors_headers,
+                })
+                await send({"type": "http.response.body", "body": b""})
+                return
+
+            async def cors_send(message):
+                if message["type"] == "http.response.start":
+                    message["headers"] = [
+                        (key, value)
+                        for key, value in message.get("headers", [])
+                        if not key.lower().startswith(b"access-control-")
+                        and key.lower() != b"vary"
+                    ] + cors_headers
+                await send(message)
+        else:
+            cors_send = send
+
         if (
             scope["type"] == "http"
             and scope.get("method") == "POST"
             and scope.get("path", "").startswith("/gradio_api/")
         ):
-            headers = {
-                key.decode("latin-1").lower(): value.decode("latin-1")
-                for key, value in scope.get("headers", [])
-            }
             content_type = headers.get("content-type", "")
             if "application/json" not in content_type:
-                return await self.app(scope, receive, send)
+                return await self.app(scope, receive, cors_send)
 
             body_parts = []
             while True:
@@ -466,9 +513,9 @@ class StringifiedGradioJSONMiddleware:
                     "more_body": False,
                 }
 
-            return await self.app(scope, replay_receive, send)
+            return await self.app(scope, replay_receive, cors_send)
 
-        return await self.app(scope, receive, send)
+        return await self.app(scope, receive, cors_send)
 
 
 # Create a parent FastAPI app with redirect_slashes=False to prevent
@@ -482,14 +529,6 @@ root_app.mount("/api", api_app)
 
 # Mount Gradio app at root path
 app = gr.mount_gradio_app(root_app, demo, path="/")
-app = CORSMiddleware(
-    app,
-    allow_origins=["https://index.openhands.dev"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-    expose_headers=["*"],
-)
 app = StringifiedGradioJSONMiddleware(app)
 logger.info("REST API mounted at /api, Gradio app mounted at /")