DWDS requests are sent to wrong port

[Wdestroier]

Hi!

I'm running webdev with the following command: cd dart_app & webdev serve web:7777 --hostname 0.0.0.0 --auto restart --tls-cert-chain=localhost.pem --tls-cert-key=localhost-key.pem. I have a reverse proxy locally to redirect requests where the URL path starts with /a to port 7777 (it also removes the /a).

Proxy configuration

For some reason, requests made to /$dwdsSseHandler are being sent directly to port 7777 and the page doesn't load. I created a client-side workaround:

Workaround

index.html:

  <script src="dwds-redirect.js"></script>
  <script defer src="main.dart.js"></script>

dwds-redirect.js:

// Redirect Dart Web Developer Service (DWDS) requests to port 5173.
(function () {
  'use strict';

  if (window.location.port !== '5173') {
    return;
  }

  const TARGET_PORT = 5173;
  const SSE_HANDLER_PATH = '/$dwdsSseHandler';

  // Intercept fetch requests.
  const originalFetch = window.fetch;
  window.fetch = function (input, init) {
    let url = typeof input === 'string' ? input : input.url;

    if (url && url.includes(SSE_HANDLER_PATH)) {
      try {
        const urlObj = new URL(url, window.location.origin);
        if (urlObj.pathname === SSE_HANDLER_PATH || urlObj.pathname.endsWith(SSE_HANDLER_PATH)) {
          urlObj.port = TARGET_PORT;
          urlObj.protocol = window.location.protocol;
          url = urlObj.toString();

          if (typeof input === 'string') {
            input = url;
          } else {
            input = new Request(url, input);
          }
        }
      } catch (e) {
        console.warn('Failed to redirect SSE handler URL:', e);
      }
    }

    return originalFetch.call(this, input, init);
  };

  // Intercept XMLHttpRequest.
  const originalOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
    if (url && url.includes(SSE_HANDLER_PATH)) {
      try {
        const urlObj = new URL(url, window.location.origin);
        if (urlObj.pathname === SSE_HANDLER_PATH || urlObj.pathname.endsWith(SSE_HANDLER_PATH)) {
          urlObj.port = TARGET_PORT;
          urlObj.protocol = window.location.protocol;
          url = urlObj.toString();
        }
      } catch (e) {
        console.warn('Failed to redirect SSE handler URL:', e);
      }
    }

    return originalOpen.call(this, method, url, async, user, password);
  };

  // Intercept EventSource (for SSE connections).
  const originalEventSource = window.EventSource;
  window.EventSource = function (url, eventSourceInitDict) {
    if (url && url.includes(SSE_HANDLER_PATH)) {
      try {
        const urlObj = new URL(url, window.location.origin);
        if (urlObj.pathname === SSE_HANDLER_PATH || urlObj.pathname.endsWith(SSE_HANDLER_PATH)) {
          urlObj.port = TARGET_PORT;
          urlObj.protocol = window.location.protocol;
          url = urlObj.toString();
        }
      } catch (e) {
        console.warn('Failed to redirect SSE handler URL:', e);
      }
    }

    return new originalEventSource(url, eventSourceInitDict);
  };

  console.log('DWDS SSE handler redirect configured to port ' + TARGET_PORT + '.');
})();

Can DWDS make requests to the correct port? A possible implementation is to try a port and if the request fails try another port.

Ideally I would also want to remove the --tls-cert-chain=localhost.pem --tls-cert-key=localhost-key.pem flags from webdev, but doing so the page stays blank and doesn't load, although all network requests succeed.

[Markzipan]

Poking @bkonyi @jyameo - I think proxy issues have been reported before and are being tracked somewhere?

I chatted with @natebiggs, and we think there might be some poor SSE configuration around

webdev/dwds/lib/src/handlers/injector.dart

Line 82 in be9f117

final requestedUriBase =

, but I'm not super familiar with this handshake.

[Wdestroier]

I updated Flutter to the latest version (3.38.1) and I'm getting a few new errors. I'm not sure if I should report them here. I'm trying to migrate from Vite's dev proxy to the new Flutter dev proxy.

:5173 is the Vite dev proxy port.
:7777 is the Dart, HTML and CSS app port, served with webdev.
:3000 is the Flutter app port, has a web_dev_config.yaml config.

The browser can access :7777 and the index.html is correctly returned. The browser can access :5173 and the page loads perfectly. The request fails if the Flutter proxy on :3000 tries to redirect to the Dart app server on :7777. The request also fails when trying to redirect to Vite's proxy on :5173.

localhost:7777 (loads)
localhost:5173/a/ -> localhost:7777 (loads)
localhost:3000/a/ -> localhost:7777 (doesn't load)
localhost:3000/a/ -> localhost:5173/a/ -> localhost:7777 (I removed the replace: "" from the config, but doesn't load)

I tried many configurations (HTTPS, hostname, ports), but that's the current configuration:

server:
  host: "localhost"
  port: 3000
  proxy:
    - target: "http://127.0.0.1:7777/"
      prefix: "/a/"
      replace: ""

// ---------------------------------------------------------------------------------- //

    server: {
      proxy: {
        '^/a($|[/?])': {
          target: 'http://127.0.0.1:7777',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path
            .replace(/^\/a/, '/')   // Replace the leading /a with a single slash.
            .replace(/\/\/+/, '/')  // Collapse any double slashes if they occur.
        },
      }
    }

Checking the DevTools Network tab, the request fails when making a request to retrieve main.dart.bootstrap.js. Logs:

[proxyMiddleware] Matched "/a/main.dart.bootstrap.js". Requesting "https://127.0.0.1:5173/a/main.dart.bootstrap.js"
ERROR - 2025-11-14 17:57:17.586305
GET /a/main.dart.bootstrap.js
Error thrown by handler.
RangeError (end): Invalid value: Not in inclusive range 0..678: -1
dart:core                                       List.sublist
package:dwds/src/handlers/injector.dart 145:26  _injectClientAndHoistMain
package:dwds/src/handlers/injector.dart 98:24   DwdsInjector.middleware.<fn>.<fn>

[proxyMiddleware] Matched "/a/main.dart.bootstrap.js". Requesting "https://127.0.0.1:7777/main.dart.bootstrap.js"
ERROR - 2025-11-14 18:33:56.097222
GET /a/main.dart.bootstrap.js
Error thrown by handler.
Exception: Could not find metadata contents for a/main.dart.ddc_merged_metadata
package:flutter_tools/src/isolated/web_asset_server.dart 751:5         WebAssetServer.metadataContents
package:dwds/src/debugging/metadata/provider.dart 176:41               MetadataProvider._processMetadata
package:dwds/src/debugging/metadata/provider.dart 204:30               MetadataProvider._initialize.<fn>
dart:async                                                             new Future.sync
package:async/src/async_memoizer.dart 43:45                            AsyncMemoizer.runOnce
package:dwds/src/debugging/metadata/provider.dart 203:29               MetadataProvider._initialize
package:dwds/src/debugging/metadata/provider.dart 147:11               MetadataProvider.moduleToModulePath
package:dwds/src/loaders/frontend_server_strategy_provider.dart 51:38  FrontendServerStrategyProvider._moduleProvider
package:dwds/src/loaders/ddc_library_bundle.dart 193:46                DdcLibraryBundleStrategy._ddcLoaderSetup
package:dwds/src/loaders/ddc_library_bundle.dart 185:13                DdcLibraryBundleStrategy.bootstrapFor
package:dwds/src/handlers/injector.dart 105:62                         DwdsInjector.middleware.<fn>.<fn>