Bug: Polly does not respect <base> tag

Prerequisites

A website running under a certain path e.g. “http://localhost:4200/some/feature”

Description

XHR requests made to a relative url, e.g. “rest/my-api” are altered by PollyJS to contain parts of the browser url. In this example “/some/rest/my-api”.

Config

      Polly.register(XHRAdapter);
      Polly.register(PersisterStub);

      const polly = new Polly('mock', {
        adapters: ['xhr'],
        persister: 'PersisterStub'
      });

      const { server } = polly;

      server.get().passthrough();

Dependencies

{
    "@pollyjs/adapter-xhr": "~4.0.2",
    "@pollyjs/core": "~4.0.2",
    "@pollyjs/persister-rest": "~4.0.2",
}

Relevant Links

https://github.com/nbfr/pollyjs-dream-app

You can run the app with “npm run start” to run without PollyJS or “npm run start-mock” to run with PollyJS. Then open http://localhost:4200/some/feature.

Then check the network traffic. The client will send a request to “rest/my-api” which is changed by PollyJS to “some/rest/my-api”.

Environment

Node.JS v10.16.3 win32 10.0.1832 npm 6.9.0

[nbfr]

@jasonmit : Thank you for quick feedback and the work around. For now I decided to extend the existing XHRAdapter.

class ProjectXHRAdapter extends XHRAdapter {
  static get type() {
    return 'adapter';
  }

  onConnect() {
    const basePath = new URL(document.baseURI).pathname;
    super.onConnect();
    const onCreate = (this as any).xhr.onCreate;
    (this as any).xhr.onCreate = xhrReq => {
      onCreate(xhrReq);
      const send = xhrReq.send;
      xhrReq.send = body => {
        if (!xhrReq.url.startsWith('/') && !xhrReq.url.startsWith('http://') && !xhrReq.url.startsWith('https://')) {
          xhrReq.url = basePath + xhrReq.url;
        }
        send(body);
      };
    };
  }
}

[jasonmit]

Okay, I believe this is caused by Polly not respecting the <base href="/"> in your template when building the request URL.

For now, a work around like this should unblock you:

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';

function baseifyUrl(url: string) {
  let base = document.querySelector('base');

  if (base) {
    return base.getAttribute('href') + url;
  }

  return url;
}

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html'
})
export class FeatureComponent implements OnInit {

  public requestPath = baseifyUrl('rest/my-api');

  constructor(private httpClient: HttpClient) {
  }

  ngOnInit(): void {
    this.httpClient.get(this.requestPath).subscribe((result) => console.log(result));
  }
}