[dev] allow middleware rewrites to change origin in vc dev (#8457)

Middleware rewrites in `vc dev` were not respecting changes to the origin. This PR implements that to match prodution.

---

Paired with: @TooTallNate

packages/cli/src/util/dev/server.ts

@@ -101,6 +101,7 @@ import {
   isError,
   isSpawnError,
 } from '../is-error';
+import isURL from './is-url';
 import { pickOverrides } from '../projects/project-settings';
 
 const frontendRuntimeSet = new Set(
@@ -180,11 +181,17 @@ export default class DevServer {
     this.caseSensitive = false;
     this.apiDir = null;
     this.apiExtensions = new Set();
+
     this.proxy = httpProxy.createProxyServer({
       changeOrigin: true,
       ws: true,
       xfwd: true,
     });
+    this.proxy.on('proxyRes', proxyRes => {
+      // override "server" header, like production
+      proxyRes.headers['server'] = 'Vercel';
+    });
+
     this.server = http.createServer(this.devServerHandler);
     this.server.timeout = 0; // Disable timeout
     this.stopping = false;
@@ -1560,15 +1567,33 @@ export default class DevServer {
           }
 
           if (rewritePath) {
-            // TODO: add validation?
             debug(`Detected rewrite path from middleware: "${rewritePath}"`);
             prevUrl = rewritePath;
 
-            // Retain orginal pathname, but override query parameters from the rewrite
             const beforeRewriteUrl = req.url || '/';
+
+            if (isURL(rewritePath)) {
+              const rewriteUrlParsed = new URL(rewritePath);
+
+              // `this.address` already has localhost normalized from ip4 and ip6 values
+              const devServerParsed = new URL(this.address);
+              if (devServerParsed.origin === rewriteUrlParsed.origin) {
+                // remove origin, leaving the path
+                req.url = rewritePath.slice(rewriteUrlParsed.origin.length);
+              } else {
+                // Proxy to absolute URL with different origin
+                debug(`ProxyPass: ${rewritePath}`);
+                this.setResponseHeaders(res, requestId);
+                proxyPass(req, res, rewritePath, this, requestId);
+                return;
+              }
+            } else {
+              // Retain orginal pathname, but override query parameters from the rewrite
               const rewriteUrlParsed = url.parse(beforeRewriteUrl);
               rewriteUrlParsed.search = url.parse(rewritePath).search;
               req.url = url.format(rewriteUrlParsed);
+            }
+
             debug(
               `Rewrote incoming HTTP URL from "${beforeRewriteUrl}" to "${req.url}"`
             );

packages/cli/test/dev/fixtures/middleware-rewrite/middleware.js

@@ -1,6 +1,15 @@
 export default req => {
   const url = new URL(req.url);
 
+  const rewriteTo = url.searchParams.get('to');
+  if (rewriteTo) {
+    return new Response(null, {
+      headers: {
+        'x-middleware-rewrite': rewriteTo,
+      },
+    });
+  }
+
   if (url.pathname === '/') {
     // Pass-through "index.html" page
     return new Response(null, {

packages/cli/test/dev/integration-4.test.ts

@@ -457,9 +457,42 @@ test(
     await testPath(200, '/another', '<h1>Another</h1>');
     await testPath(200, '/another.html', '<h1>Another</h1>');
     await testPath(200, '/foo', '<h1>Another</h1>');
+    // different origin
+    await testPath(200, '?to=http://example.com', /Example Domain/);
   })
 );
 
+test('[vercel dev] Middleware rewrites with same origin', async () => {
+  const directory = fixture('middleware-rewrite');
+  const { dev, port, readyResolver } = await testFixture(directory);
+
+  try {
+    dev.unref();
+    await readyResolver;
+
+    let response = await fetch(
+      `http://localhost:${port}?to=http://localhost:${port}`
+    );
+    validateResponseHeaders(response);
+    expect(response.status).toBe(200);
+    expect(await response.text()).toMatch(/<h1>Index<\/h1>/);
+
+    response = await fetch(
+      `http://localhost:${port}?to=http://127.0.0.1:${port}`
+    );
+    validateResponseHeaders(response);
+    expect(response.status).toBe(200);
+    expect(await response.text()).toMatch(/<h1>Index<\/h1>/);
+
+    response = await fetch(`http://localhost:${port}?to=http://[::1]:${port}`);
+    validateResponseHeaders(response);
+    expect(response.status).toBe(200);
+    expect(await response.text()).toMatch(/<h1>Index<\/h1>/);
+  } finally {
+    await dev.kill('SIGTERM');
+  }
+});
+
 test(
   '[vercel dev] Middleware that rewrites with custom query params',
   testFixtureStdio('middleware-rewrite-query', async (testPath: any) => {