Add a way to set custom headers to request

[kytosai]

I want to set a header token with ajax request of infinite-scroll. But it haven't option to do it.

I try

`$.ajaxSetup({
beforeSend: setHeader
});

var setHeader = function (xhr) {
  console.log('beforeSend');
  xhr.setRequestHeader('token', '33vscths658h7996d324rqft1s');
}`

or

$.ajaxSetup({ headers: { 'token': '33vscths658h7996d324rqft1s' }, });

But it cannot work.
Help me, please ! Thank you !

[desandro]

Thank you for submitting this issue. Currently there is no API to add headers to requests, similar to jQuery's beforeSend option with $.ajax

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

It could look something like:

$('.container').infiniteScroll({
  beforeSend: function( xhr ) {
    xhr.setRequestHeader( 'custom_header', 'value' );
  }
})

[janvitos]

I would also be very interested in this feature, and I think many would benefit from it as well.

There is currently a conflict between wordpress, infinite scroll, nginx fastcgi cache and cloudflare cache when they are all used together.

The problem occurs when you are scrolling and loading a new page. What seems to happen is that when the XHR request is cached by the browser and loads the new page from cache, although you cleared all server caches (fastcgi cache and cloudflare cache), an older and expired cached page will be loaded directly from the user's browser. So when you add a new article on your home page and it changes the order of the posts, the cached XHR request messes the order and configuration of displayed posts once you scroll and load new pages, outputting the same post two times and not showing all of the posts.

The only way I was able to fix this issue was by using a custom cache-control header with "no-store, no-cache, must-revalidate". To do this, I had to manually edit infinite-scroll.pkgd.min.js and add the following line:

r.setRequestHeader("Cache-Control","no-store, no-cache, must-revalidate")

Right after this line:

r.setRequestHeader("X-Requested-With","XMLHttpRequest")

So in the end, it works, but it would be really nice if custom headers could be added to this plugin so we didn't have to modify the original code.

Thank you.

[desandro]

Infinite Scroll v4 has been released. Infinite Scroll v4 adds a new option, fetchOptions, which allows you to set method, headers, CORS mode, and other options for the fetch request

fetchOptions: {
  mode: 'cors',
  cache: 'no-cache',
  credentials: 'same-origin',
  headers: {
    'X-Session-Id': '33vscths658h7996d324rqft1s',
  },
},