Update vite.config.ts

[chelojimenez]

Note

Adds self-handled passthrough proxies for sandbox endpoints to prevent Vite HMR from modifying HTML, and splits out a general /api proxy.

• Dev server proxy (client/vite.config.ts):
  • Sandbox passthrough routes:
    • Add "/api/mcp/sandbox-proxy" and "/api/apps/chatgpt/sandbox-proxy" with selfHandleResponse: true and direct proxyRes piping to bypass Vite HTML transformation/HMR injections.
  • General API proxy:
    • Introduce simplified "/api" proxy with changeOrigin, secure: false, and ws: true.
  • Remove previous generic /api proxy handlers in favor of route-specific handling.

^{Written by Cursor Bugbot for commit b2b8ced. This will update automatically on new commits. Configure here.}

[matteo8p]

this doesn't look right?

[coderabbitai]

Walkthrough

Vite's proxy configuration in the development server was reconfigured to handle sandbox proxies with explicit route targeting. The unified /api proxy was replaced with dedicated routes: /api/mcp/sandbox-proxy and /api/apps/chatgpt/sandbox-proxy. Both sandbox routes employ selfHandleResponse and proxyRes handlers that forward HTTP status and headers while piping response bodies directly to clients, circumventing Vite's HTML transformation. A general /api proxy was restored to support standard proxy behavior for non-sandbox requests. Comments were added explaining the sandbox proxy handling mechanism.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

client/vite.config.ts (2)

67-83: Solid approach to bypass HMR injection.

The selfHandleResponse mechanism correctly prevents Vite from transforming sandbox responses. However, consider two refinements:

1. Add error handling for the pipe operation to prevent silent failures:

 configure: (proxy) => {
   proxy.on("proxyRes", (proxyRes, req, res) => {
     res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
-    proxyRes.pipe(res);
+    proxyRes.pipe(res).on("error", (err) => {
+      console.error("Sandbox proxy pipe error:", err);
+      if (!res.headersSent) res.writeHead(502);
+      res.end();
+    });
   });
 },

2. Verify WebSocket requirements for sandbox proxies—the general /api proxy enables ws: true, but these routes omit it.

Does the sandbox proxy architecture require WebSocket support, or is standard HTTP sufficient?

---

84-94: Extract the duplicated configuration into a helper.

The sandbox proxy configuration is duplicated between this route and /api/mcp/sandbox-proxy. Reduce maintenance burden by extracting the shared logic:

// Define before the proxy configuration
const createSandboxProxyConfig = () => ({
  target: "http://localhost:6274",
  changeOrigin: true,
  selfHandleResponse: true,
  configure: (proxy) => {
    proxy.on("proxyRes", (proxyRes, req, res) => {
      res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
      proxyRes.pipe(res).on("error", (err) => {
        console.error("Sandbox proxy pipe error:", err);
        if (!res.headersSent) res.writeHead(502);
        res.end();
      });
    });
  },
});

Then use it in the proxy configuration:

-"/api/apps/chatgpt/sandbox-proxy": {
-  target: "http://localhost:6274",
-  changeOrigin: true,
-  selfHandleResponse: true,
-  configure: (proxy) => {
-    proxy.on("proxyRes", (proxyRes, req, res) => {
-      res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
-      proxyRes.pipe(res);
-    });
-  },
-},
+"/api/apps/chatgpt/sandbox-proxy": createSandboxProxyConfig(),

Apply the same pattern to /api/mcp/sandbox-proxy.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c4ef8bb and b2b8ced.

📒 Files selected for processing (1)

• client/vite.config.ts (1 hunks)

🧰 Additional context used

🔍 Remote MCP Context7

Let me search for more specific information about selfHandleResponse and the HTML transformation issue in Vite:Based on my research, I now have sufficient context to provide a comprehensive summary for reviewing this PR. Let me compile the findings:

Summary of Additional Context for PR Review

Vite Proxy Configuration Overview

If a request matches any of the configured proxy rules, the request won't be transformed by Vite. This is a key principle being leveraged in the PR to prevent unwanted transformations on sandbox proxy responses.

Understanding selfHandleResponse

When selfHandleResponse is set to true, none of the webOutgoing passes are called and it's your responsibility to appropriately return the response by listening and acting on the proxyRes event. This is critical for the sandbox proxy implementation—it allows direct control over response handling while bypassing Vite's standard response transformation pipeline.

The selfHandleResponse: true option with a proxyRes handler enables copying proxy response headers and piping the response directly to the client.

Vite HTML Transformation Context

The PR addresses preventing Vite's HTML transformation for sandbox proxy routes. This is important because wrapper apps that render user content in iframes may require custom WebSocket events to coordinate with the Vite backend and IDE, and the default Vite HMR client injection can interfere with this.

HMR Injection Concerns

The Vite team has acknowledged requests to provide a flag or configuration to prevent HMR client injection. The PR's approach of using per-route sandbox proxies with selfHandleResponse effectively bypasses Vite's HTML transformation middleware for these specific paths, preventing unwanted HMR script injection in sandbox iframes.

Additional Proxy Configuration Features

The PR restores the general /api proxy with standard Vite proxy options including http-proxy-3 under the hood, supporting target, changeOrigin, secure, and ws settings for WebSocket proxying.

---, [::web_search::]

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Cursor Bugbot

🔇 Additional comments (1)

client/vite.config.ts (1)

95-101: General proxy configuration is sound.

The placement after specific sandbox routes ensures correct routing precedence, and ws: true properly enables WebSocket support for standard API calls. Using secure: false for localhost:6274 is appropriate in development.