CORS error when using electric docker container on a port other than 3000

[giladrom]

Docker startup command:

docker run \
    -e "DATABASE_URL=postgresql://..." \
    -e "ELECTRIC_SECRET=$ELECTRIC_SECRET" \
    -e "ELECTRIC_PORT=3010" \
    -p 3010:3010 \
    -t \
    electricsql/electric:latest

React useShape() init:

const { isLoading: isLoadingShape, data: documentsShape } =
    useShape<Document>({
      url: `http://localhost:3010/v1/shape`,
      params: {
        table: "document",
        api_secret: process.env.ELECTRIC_SECRET,
      },
      onError: (error) => {
        console.error(error);
      },
    });

Electric docker log:

=INFO REPORT==== 29-Mar-2025::10:05:41.723316 ===
Loading 140 CA(s) from otp store
=WARNING REPORT==== 29-Mar-2025::10:05:46.724448 ===
detector 'Elixir.Electric.Telemetry.OpenTelemetry.ResourceDetector' timed out while executing

10:05:46.770 pid=<0.2839.0> [notice] Starting telemetry reporter. Electric will send anonymous usage data to https://checkpoint.electric-sql.com. You can configure this with `ELECTRIC_USAGE_REPORTING` environment variable, see https://electric-sql.com/docs/reference/telemetry for more information.

10:05:46.780 pid=<0.2833.0> [warning] Failed to connect to the database using SSL. Trying again, using an unencrypted connection.

10:05:46.781 pid=<0.2843.0> [notice] Starting telemetry reporter. Electric will send anonymous usage data to https://checkpoint.electric-sql.com. You can configure this with `ELECTRIC_USAGE_REPORTING` environment variable, see https://electric-sql.com/docs/reference/telemetry for more information.

10:05:46.787 pid=<0.2809.0> [info] Running Electric.Plug.Router with Bandit 1.5.5 at 0.0.0.0:3010 (http)

10:05:46.827 pid=<0.2840.0> [info] Acquiring lock from postgres with name electric_slot_default

10:05:46.828 pid=<0.2840.0> [info] Lock acquired from postgres with name electric_slot_default

10:05:46.831 pid=<0.2833.0> [warning] Failed to connect to the database using SSL. Trying again, using an unencrypted connection.

10:05:46.838 pid=<0.3152.0> [info] Postgres server version = 150004, system identifier = 7487153845151621158, timeline_id = 1

10:05:46.974 pid=<0.2833.0> [info] No previous timeline detected.

10:05:46.974 pid=<0.2833.0> [info] Connected to Postgres  and timeline

10:05:47.004 pid=<0.3177.0> [info] Starting shape replication pipeline

10:05:47.035 pid=<0.3152.0> [info] Starting replication from postgres

10:05:50.040 pid=<0.3182.0> request_id=GDE-C4lrHDOidGwAAAEo [info] GET /v1/health

10:05:50.041 pid=<0.3182.0> request_id=GDE-C4lrHDOidGwAAAEo [info] Sent 200 in 229µs

10:05:52.082 pid=<0.3183.0> request_id=GDE-DAHFpzmnqvYAAAxh [info] GET /v1/shape

10:05:52.082 pid=<0.3183.0> request_id=GDE-DAHFpzmnqvYAAAxh [info] Sent 401 in 173µs

Following the QuickStart manual results in an unusable setup - getting CORS errors:

Access to fetch at 'http://localhost:3010/v1/shape?offset=-1&table=document' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

GET http://localhost:3010/v1/shape?offset=-1&table=document net::ERR_FAILED 401 (Unauthorized)

I have other services already running on port 3000, and I expected Electric to be usable regardless of the port it's assigned.