Should allow some kind of mapping for domainless/origin requests.

[dwjohnston]

Repro for this issue here: https://github.com/dwjohnston/msw-webarchive-issue/commit/115266f27bed3bcb189d3fb5a3d4bd51c2d01557

In my application it's typical that I want to make requests against the origin server, rather than specifying a domain. Eg, my fetch code is like this:

async function getData() {
  const result = await fetch("/hello"); 
  const json = await result.json(); 

  return json; 
}

The problem is, a har file for this application ends up looking like this:

        "request": {
          "method": "GET",
          "url": "http://localhost:3000/hello",

And then msw-webarchive doesn't mock the endpoint properly, I see an error message that looks like this:

  console.log
    Registering route for GET for http://localhost:3000/hello

      at logger (node_modules/@tapico/msw-webarchive/dist/umd/index.js:234:23)
          at Array.map (<anonymous>)

  console.log
    Registering route for GET for http://localhost:3000/manifest.json

      at logger (node_modules/@tapico/msw-webarchive/dist/umd/index.js:234:23)
          at Array.map (<anonymous>)

  console.log
    Registering route for GET for http://localhost:3000/favicon.ico

      at logger (node_modules/@tapico/msw-webarchive/dist/umd/index.js:234:23)
          at Array.map (<anonymous>)

  console.log
    Registering route for GET for http://localhost:3000/logo192.png

      at logger (node_modules/@tapico/msw-webarchive/dist/umd/index.js:234:23)
          at Array.map (<anonymous>)

  console.error
    [MSW] Error: captured a request without a matching request handler:
    
      • GET http://localhost/hello
    
    If you still wish to intercept this unhandled request, please create a request handler for it.
    Read more: https://mswjs.io/docs/getting-started/mocks

Workaround

I can get this to work by hardcoding in the domain to make requests against:

async function getData() {
-  const result = await fetch("/hello");
+  const result = await fetch("http://localhost:3000/hello");  
  const json = await result.json(); 

  return json; 
}

But this is a bit icky.

Ideal solution

What would be preferable is some kind of automatic ignoring of ports on localhost domains, or a kind of 'mapping' configuration, eg where I could do something like:

import * as traffic from './testData/example.har.json';
- setRequestHandlersByWebarchive(server, traffic);
+ setRequestHandlersByWebarchive(server, traffic, {
+    domainMappings: {
+        "http://localhost/" : "http://localhost:3000/"
+    }
+});

Alternative workaround

We manually rework our har file with this snippet:

traffic.log.entries.forEach((v) => {
  v.request.url = v.request.url.replace('http://localhost:3000/', 'http://localhost/');
})

[weyert]

Thank you for your reproduction @dwjohnston. I will have a look. I think such as mapping list seems reasonable

[tapico-weyert]

Resolved