Loading subdomains

[oskameDEV]

I have a site setup that divides each section of the site in a subdomain.
Everything for that works like a charm but when trying to use Barba to ajax load subdomain pages I run into "Access-Control-Allow-Headers" issues. I managed to get rid of those problems except,
pushState: "SecurityError: DOM Exception 18: The operation is insecure." won't allow it.
Is there a way to solve this?

Example:
User is on 'journal.site.com' and clicks the menu item that goes to 'about.site.com'

[oskameDEV]

https://en.wikipedia.org/wiki/Same-origin_policy
does describe it finds subdomains to be a different host than the original domain.

What were they thinking?!

Is there a workaround that can work with Barba?

[luruke]

Hello @ideaprison .
This is not a problem of the ajax request, but a security limitation of the HTML5 PushState API.

From the documentation:

The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.

[oskameDEV]

Ugh, how idiotic..

Thanks for the fast respons though, at least I know what the problem is now.

[luruke]

You may try some some crazy thing like:

• Disable pushstate
• Keep the new url in an hash (es. mystartsubdomain.site.com/#url=mynewsubdomain.site.com)

Then on the page load, if you detect the hash #url, redirect to that url.

Of course this would imply a fork of barba.js and modify some core functions like the onpopstate change and etc.

But it's the only way I think if you want to keep different subdomain.

Anyway it's strange that you have that error, ideally when barba.js can't do the pushstate should redirect to that url: https://github.com/luruke/barba.js/blob/master/src/Pjax/Pjax.js#L224

I will try to do some testing :)

[oskameDEV]

Oh, you're right it did forward to the page, I disabled your check to see if I could get it to work with the subdomain loading.

[smth]

@ideaprison did you pursue this any further? I was hoping to do something similar.

[oskameDEV]

There isn't a pretty workaround at this time. But depending on your transition animation.
You can edit the function in Barba.js so that any links that are detect not to be on the same domain will have a different transition. IE if you fade-in/out. You can then write your code to fade out the site, then load the subdomain, and have your site always load fading in. Because most browsers now hold the page while loading the next. So the transition (in this example fade-in/out) will look the same (but load less quickly then the pages on the same (sub)domain.

Hope I'm making sense.

[smth]

OK, thanks for letting me know. So if I'm understanding correcting, assuming you were only concerned with external links, there'd probably be no reason to include Barba in the above scenario. Right?

[oskameDEV]

Correct. Then you could just rewrite your links a bit with something like:

$('a.linkClass').on( "click", function(e) {
  $target = $(this).attr('href');

  showLoader();  // example function to show a transition.
  // Else do something like $('#content').fadeOut({
  //    window.location.href = $target;
  // }, 500);

  setTimeout(function(){
      // OPEN PAGE NOW
      window.location.href = $target;
    }, 2000); // timing depends on what you want to do for a transition.
  e.preventDefault();
});