How to redirect ajax requests to .htaccess?

Question

JavaScript

The site is divided into backend and frontend, communication takes place through Ajax requests. A single entry point is used, for the front index.html and for the back handler api.php

I'm not a master of composing .htaccess, I pieced it together:

AddDefaultCharset utf-8
Options -Indexes

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_URI} !^\frontend/scripts/*
RewriteCond %{REQUEST_URI} !^\frontend/styles/fonts/*
RewriteCond %{REQUEST_URI} !^\frontend/images/*

# if it is ajax request
RewriteCond %{HTTP:X-Requested-With} XMLHttpRequest
RewriteRule . api.php [L]

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html

With this layout, everything always works in firefox, in chrome it starts working if you disable the cache in the developer panel or force a slash at the end of each Ajax request: site.ru/article/21/ and the request site.ru/article/21/ ?q=query doesn't work.

It does not work when instead of the expected json data, the index.html page comes in the response.
How to fix the situation so that the Ajax request is correctly redirected to api.php in any browser?