Whenever I use browserHistory on local i have no issues, but when i test it before I ship it i get a blank page with the error. So when i replace browserHistory with hashHistory everything works fine, but i lose the pretty url.

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///Users/somefile/work/someproject/index.html' cannot be created in a document with origin 'null' and URL.

const Routes = (
  <Router history={browserHistory}>
    <Route path="/" ponent={Login} />
    <Route path="/content" ponent={App} >
      <Route path="/ponent1" ponent={ponent1} />
      <Route path="/ponent2" ponent={ponent2} />
      <Route path="/ponent3" ponent={ponent3} />
    </Route>
  </Router>
);

in my index.js

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store={store}>
  {Routes}
  </Provider>,
  document.querySelector('.react-internal')
)

in my app.js

export default class App extends Component {

  render() {
    return (
      <div>
      <Header />
      <div className="container-fluid">
        {this.props.children}
        </div>
      </div>
    );
  }
}

and my webpack file

var webpack = require('webpack');

module.exports = {
  devtool:'source-map',
  entry: [
    './src/index.js',
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      { test: /\.css$/, loader: "style!css" },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  devServer: {
    port:8080,
    historyApiFallback: true,
    contentBase: './'
  }
};

Whenever I use browserHistory on local i have no issues, but when i test it before I ship it i get a blank page with the error. So when i replace browserHistory with hashHistory everything works fine, but i lose the pretty url.

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///Users/somefile/work/someproject/index.html' cannot be created in a document with origin 'null' and URL.

const Routes = (
  <Router history={browserHistory}>
    <Route path="/" ponent={Login} />
    <Route path="/content" ponent={App} >
      <Route path="/ponent1" ponent={ponent1} />
      <Route path="/ponent2" ponent={ponent2} />
      <Route path="/ponent3" ponent={ponent3} />
    </Route>
  </Router>
);

in my index.js

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store={store}>
  {Routes}
  </Provider>,
  document.querySelector('.react-internal')
)

in my app.js

export default class App extends Component {

  render() {
    return (
      <div>
      <Header />
      <div className="container-fluid">
        {this.props.children}
        </div>
      </div>
    );
  }
}

and my webpack file

var webpack = require('webpack');

module.exports = {
  devtool:'source-map',
  entry: [
    './src/index.js',
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      { test: /\.css$/, loader: "style!css" },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  devServer: {
    port:8080,
    historyApiFallback: true,
    contentBase: './'
  }
};

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Apr 20, 2016 at 7:31 sdgluck 27.4k1212 gold badges8181 silver badges9595 bronze badges asked Apr 20, 2016 at 6:28 caffeinescriptcaffeinescript 1,41122 gold badges1515 silver badges2727 bronze badges 3

• Possible duplicate of Origin null is not allowed by Access-Control-Allow-Origin – Chris Commented Apr 20, 2016 at 6:53
• When you test locally, do you run it via a webserver or just clicking the HTML file? – krs Commented Apr 20, 2016 at 7:47
• when im running it locally i run it on webpack dev server. after i run webpack and bundle it i test it by clicking the index.html file – caffeinescript Commented Apr 20, 2016 at 7:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I had to add a base url and link to the folder. I think it all depends on how you deploy

import { createHistory } from 'history'


const history = useRouterHistory(createHistory)({
  basename: '/projectFolder'
})
const Routes = (
  <Router history={history} >

    <Route path="/" ponent={Login} />
    <Route path="/content" ponent={App} >
      <Route path="/ponent1" ponent={ponent1} />
      <Route path="/ponent2" ponent={ponent2} />
      <Route path="/ponent3" ponent={ponent3} />
    </Route>
  </Router>
);

Also you need to take into account where u r deploying the project. For example, if u deploy to firebase, in firebase.json file you have to add this "destination": "/index.html" code. After including these line of code the url will work fine

firebase.json

{
 "hosting": {       
   "public": "public/dist", 
   "rewrites": [ {
     "source": "**",   
     "destination": "/index.html"  // this line of code is very important, which makes your url work in production. This code means that no matter what url is, direct all processing in index.html
   } ]
 }

}