Version

2.0.0

Steps to reproduce

• Frontend on http://localhost:8080
• Backend on http://localhost:9000 serving index.html
• index.html with base attribute set to point on frontend assets instead of

<base href="http://localhost:8080"/>

Expected Behavior

React-router should work, or at least it should be possible to configure it to make it work

Actual Behavior

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://localhost:8080/public/stamples/56fd5227be7e3a4f0770c486/slug' cannot be created in a document with origin 'http://localhost:9000'.

getCurrentLocation @ createBrowserHistory.js?e7cc:60
listen @ createHistory.js?cf40:106
listen @ createDOMHistory.js?4b9b:31
listen @ createBrowserHistory.js?e7cc:144
listen @ useBasename.js?8423:75listen @ 
useQueries.js?d176:108listen @ 
createTransitionManager.js?aa7a:270componentWillMount @ 

Trying with basename:

import { createHistory, useBasename } from 'history'
const history = useRouterHistory(createHistory)({
  basename: 'http://localhost:9000'
});

Same error.

Solution proposal

It seems the error is here:

function getCurrentLocation(historyState) {
    historyState = historyState || window.history.state || {};

    var path = _DOMUtils.getWindowPath();
    var _historyState = historyState;
    var key = _historyState.key;

    var state = undefined;
    if (key) {
      state = _DOMStateStorage.readState(key);
    } else {
      state = null;
      key = history.createKey();

      if (isSupported) window.history.replaceState(_extends({}, historyState, { key: key }), null, path);
    }

    var location = _PathUtils.parsePath(path);

    return history.createLocation(_extends({}, location, { state: state }), undefined, key);
  }

_DOMUtils.getWindowPath(); returns a relative url.

In my experience encoutering a similar problem in the past, when base attribute is set, we should always use absolute urls. You can see it by yourself by running a simple test on a page which have a base attribute:

history.replaceState(undefined,undefined,"/path")
VM3817:2 Uncaught DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://localhost:8080/path' cannot be created in a document with origin 'http://localhost:9000'.(…)

Here is the original implementation that returns a relative url

function getWindowPath() {
  return window.location.pathname + window.location.search + window.location.hash;
}

By changing it to:

function getWindowPath() {
  return window.location.href;
}

it solves my problem and I don’t have security issues anymore. However I have no idea of what else in React-router it could break.

Now I have this warning but it seems to start at least: Warning: A path must be pathname + search + hash only, not a fully qualified URL like "http://localhost:9000/public/stamples/56fd5227be7e3a4f0770c486/slug"

Not really sure it’s a History or React-router, feel free to move it needed 😉