How do you fake a .xhr request using fetch() and vanilla JavaScript?

Question

I am working on stripping all of the jQuery out of a website and replacing it with plain JS. First off I have no control over the backend. I can not change anything server side. So the api will run my request through this:

def render_created_comment(comment)
    if request.xhr?
      render :partial => "comments/postedreply", :layout => false,
        :content_type => "text/html", :locals => { :comment => comment }
    else
      redirect_to comment.path
    end
  end

This is setup so the site can process normal js requests and those who refuse to use JS and treat the site like it is 1999.

So I need to write a fetch request that fakes being an .xhr , is that possible? I can already send the form data but I end up with the redirect which I am trying to avoid.

Answer 1

When you use fetch() add the X-Requested-With: XMLHttpRequest header. This is essentially what jQuery and other frameworks do.

fetch(url, {
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
}