Karma proxy configuration: missing host mapping for API requests

Question

Karma proxy configuration
When running unit tests that hit external services, the proxies setting in karma.conf.js can redirect network traffic to a mock server. However, the current configuration lacks a mapping for the /api endpoint used by the application under test.
Without this mapping, tests that perform HTTP requests to https://api.example.com/resource fail because the browser attempts to reach the real production API. The goal is to enable integration tests that exercise the service layer without using production credentials.
The challenge is to determine the correct proxy target and ensure the test environment respects the same-origin policy while still allowing the browser to resolve api.example.com to a local mock server.
Specific questions

What exact proxy rule should be added to proxies to map /api requests to http://localhost:5000?
Does the Karma configuration require any additional headers or CORS settings to allow the browser to communicate with the mock server?
Will the singleRun flag affect the ability to keep the mock server running between test executions?

Tasadduq Burney · Answer

Exact proxy rule
Add the following entry to the proxies section of karma.conf.js:
module.exports = function(config) {
  config.set({
    proxies: {
      '/api': 'http://localhost:5000'
    },
    // other config...
  });
};

Confirmed facts

Karma proxies only rewrite requests the browser sends to the Karma server; they do not rewrite absolute hostnames. An absolute URL like https://api.example.com/resource will not be redirected.
When the app uses a relative path /api/…, the request is same‑origin to the Karma server (default port 9876) and no additional CORS headers are required.
singleRun: true only makes Karma exit after a single test run; it does not start or stop the mock server. Keep the mock process running independently.

Likely behavior and assumptions
The built‑in proxy forwards the full path, so the mock typically receives /api/resource. If the mock expects /resource only, adjust the mock or add a path‑rewriting middleware. Verify the exact path received with a request log.
Verification steps

Start the mock service on http://localhost:5000 before launching Karma.
Run a test that performs a request to /api/resource.
In the browser DevTools Network tab, confirm the request is same‑origin to the Karma origin and that the mock logs the request.
Ensure the response originates from the mock, not production, and note the exact path the mock sees.

Missing diagnostic detail
Does the code under test currently issue an absolute https://api.example.com/resource URL, or does it use a relative /api/resource URL? This determines whether the proxy alone will work.

Karma proxy configuration: missing host mapping for API requests

Karma proxy configuration

Specific questions

1 answer

Exact proxy rule

Confirmed facts

Likely behavior and assumptions

Verification steps

Missing diagnostic detail

Your perspective belongs here.

0 question comments