Add support for custom XHR headers

[julesvaulont]

Is there a way to add: xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest") to an BarbaJS request?

When I want to do an ajax call in Vanilla JS (without barba) I usually do:

var request = new Request(url, {
	headers: new Headers({
		'X-Requested-With': 'XMLHttpRequest'
	})
});
fetch(request)
.then(response => response.text())
.then(data => {
	console.log(data);
});

Whatever thanks for this super great lib.

[xavierfoucrier]

Hi @julesvaulont,

Sorry for the late reply.

As of today, I don't think/remember that it's possible to set custom HTTP headers inside a Barba request. We are automatically adding a x-barba header in order to know if the request has been initialized by Barba instance.

But I will tag this as feature enhancement :wink:

[julesvaulont]

Thank your for your answer!

[artkrsk]

@xavierfoucrier Hello! Thanks for the awesome library!

I'd like to +1 to the custom HTTP headers feature. In my case it's related to serving of optimized images in *.webp format.

The common practice to detect if a browser supports WEBP is checking HTTP_ACCEPT headers on a server. Like in this example:

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]
</IfModule>

This rewrite works perfectly fine for me as long as the site pages are requested initially (or on hard browser refresh). However when Barba is doing an XHR request to the next page, it sends only text/html,application/xhtml+xml,application/xml accept header doesn't contain image/webp and I always get .jpg images in my AJAX transitions even when .webp format is available and supported by browser.

The ability to setup an additional custom HTTP headers would perfectly solve the issue I've mentioned.