Невозможно отобразить значения причины политики CORS

Question

У меня есть форум Invision Community, работающий на v4.3.6, с двумя темами.Я работаю над более новым, и я хочу отображать онлайн / общее количество участников, предоставленных json db.

Для этого я создал этот скрипт, который работает только на старую тему:

<p style="margin: 0;">
    Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri &icirc;n total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
  $.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
    $('#d-online').append("&nbsp;", jd.online);
    $('#d-total').append("&nbsp;", jd.total);
 });
});
</script>

Это должно дать мне следующее: https://i.imgur.com/I4FdhSN.png

В новой теме, над которой я работаю, Chrome выводит эту ошибку в консоль: https://i.imgur.com/n3AL86E.png

Iпробовал

Создание файла .htaccess в корневой папке сайта, с этими правилами

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Но это не сработало вообще, ошибка все равно появляется.
Вместо * в поле Access-Control-Allow-Origin я попытался указать веб-сайт, на котором размещен db.json, но он не работал.
Поэтому я попытался поместить файл htaccess в / forum/ папка, где расположен форум, но ничего.

Я пытался выполнить шаги на на этом сайте , но ничего, javascript и php не работали.

Ошибка:

Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

Здесьнекоторые скриншоты заголовков db.json в консоли Chrome: https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png

Как это исправить?

Answer 1

Для устранения подобных проблем мне нравится использовать два отдельных инструмента:

• Fiddler: трассировщик маршрутизации браузера для всей вашей сети и проверки CORS.
• PostMan: Простой способ настроить необходимые заголовки и конфигурацию аутентификации, чтобы обеспечить наличие всех необходимых параметров для доступа к необходимым данным.