0

I have a Invision Community forum running on v4.3.6, with two themes. I am working on a newer one, and I want to display online/total members given by a json db.

To do this, I made this script that works only on a old theme:

<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>

That should give me this: https://i.stack.imgur.com/4pUBe.png

On the newer theme that I'm working on, chrome outputs this error in console: https://i.stack.imgur.com/JDM4X.png

I tried

Making a .htaccess file in the root folder of the website, with these rules

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"

But it didn't work at all, the error still shows up.
Instead of *on the Access-Control-Allow-Origin field, I tried to put the website that hosts that db.json as origin, but it didn't work.
So I tried putting the htaccess file inside /forum/ folder, where the forum is located, but nothing.

I tried following the steps on this website, but nothing, javascript nor php didn't work.

Error:

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.

Here are some screenshots of the db.json headers in the chrome console: https://i.stack.imgur.com/jEVwm.png
https://i.stack.imgur.com/CAAPC.png

How can I fix this?

Community
  • 1
  • 1
slash
  • 11
  • 3
  • Inspect the network traffic in your browser's _Network_ console. Have a look at the request and response headers for the `OPTIONS` request. Post screenshots if you can – Phil Nov 25 '18 at 23:01
  • Done, I added some screenshots; are those the correct one? – slash Nov 25 '18 at 23:12
  • Yep, that's what I was after. Have you made sure the Apache _headers_ module is installed and enabled? Perhaps try using `Header always set ...` instead of `Header add` – Phil Nov 25 '18 at 23:17
  • `Header always set` doesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled... – slash Nov 25 '18 at 23:22
  • 1
    You also need to make Apache handle OPTIONS requests in the right way. See the answer at https://stackoverflow.com/questions/42558221/preflight-request-not-being-handled-by-apache-cors/42558499#42558499 and see https://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/ for a more extensive how-to. – sideshowbarker Nov 25 '18 at 23:24

1 Answers1

-1

To troubleshoot things like this I like to use two separate tools:

  • Fiddler: a browser routing tracer for all your network and CORS checking needs.
  • PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
Justin Rice
  • 1,111
  • 12
  • 13