Search code examples
javascriptjqueryajaxhtml5-history

Uncaught DOMException: Failed to execute 'pushState' on 'History':


I have an issue that presents itself in different scenarios depending on the user.

Group A: When what seems to be select users loads into the homepage and click a navigation anchor which should load with AJAX and use history.pushState('', '', destinationUrl); they receive no response. An error message displays in console:

Uncaught DOMException: Failed to execute ‘pushState’ on ‘History’: A history state object with URL ‘http://example.net/foo’ cannot be created in a document with origin ‘http://www.example.net’ and URL ‘http://www.example.net/

Based on searches I figured the issue would be not including www in example.net/foo. I updated the navigation anchors to "http://www.example.net/foo".

This fixed the issue for Group A but created the same issue for the larger user base Group B with a similar error:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.example.net/foo' cannot be created in a document with origin 'http://example.net' and URL 'http://example.net/'.

For Group B the url discrepancy is inverted. The issue appears to be browser independent for both groups. The site uses Craft CMS.

Any direction or solutions to what might be happening, how can I fix this for both groups?


Solution

  • Thanks to @Patrick Evans. The recommendation to use mod_rewrite led me here: https://httpd.apache.org/docs/2.4/rewrite/remapping.html#canonicalhost

    I ultimately used the "if" directive recommendation but also tested mod_rewrite and it worked as well.

        <If "%{HTTP_HOST} != 'www.example.net'">
          Redirect "/" "http://www.example.net/"
        </If>