Ajax request makes the count continuously increasing about hit-counter

[brentvollebregt]

Looks like it's working - I also updated the REAMDE 👍

[brentvollebregt]

If you look at the request being made to the server to get the count, is there a cookie being sent?

[Rdyx]

Hmmm, I don't know (I don't think so because I guess if it did the count would not increase? ^^)

How can I check this? The website is fully static and hosted on github pages

[brentvollebregt]

If you go to DevTools (in Chrome) and look at the request headers, you can see all the cookies sent:

[Rdyx]

Oh, haha I'm feeling so dumb to forgot we can see it there :D

Ok so, if I link an image, there's a cookie but in fact, when I'm just using an ajax request, there's none

[brentvollebregt]

Take a look at this SO question: Why is jquery's .ajax() method not sending my session cookie?

It is stated that:

AJAX calls only send Cookies if the url you're calling is on the same domain as your calling script.

I know this also happens in fetch, I have previously set credentials: 'same-origin' to get around this.

If you try something like:

function updateHitCounterText(url, elementId) {
  return $.ajax({
    url: 'https://hitcounter.pythonanywhere.com/count',
    data: { url: url },
    xhrFields: {
      withCredentials: true // <-- This guy should help
    },
  }).then(hitCount => {
    replaceTextInElementById(elementId, hitCount);
  });
};

does it work?

[Rdyx]

Encountering CORS origin conflicts, tried with fetch and credentials: 'include' (since same-origin is deprecated) but having the same problem. Problem is that response header is containing Access-Control-Allow-Origin with wildcard *, which is not allowed when credentials are used ^^'

Also gave a try with ajax and dataType: jsonp but returning error too since, obviously, returned data is not JSONp :)

Edit: this is the error message while using xhrField or credentials: 'include'

[Rdyx]

I found a workaround (kinda dirty, but working).

First, gratz for your very clear and straight forward doc about setting up project on python anywhere :)

Mounted my own setup so I'm not getting hitcounter busy especially with kinda useless requests.

Now, about the workaround, I make a request with image, which is hidden in DOM, then I make a request with nocount to get the count and show it wherever I want while not increasing the counter :)

I guess I could make it cleaner by editing code and adding the wanted url as Access-Control-Allow-Origin, but since this is purely for personnal purpose and I'm lazy, I'll deal with it 😂

Here is how the final code is looking:

/**
 * Creates a dynamic hidden hitcount image
 * @param string hitCountDomain
 * @param string url
 */
function createHitCounterImgElement(hitCountDomain, url) {
  let imgElement = document.createElement('img');
  imgElement.src = 'https://' + hitCountDomain + '.pythonanywhere.com/count/tag.svg?url=' + url;
  imgElement.classList.add('hidden');
  document.getElementById('body').appendChild(imgElement);
}

/**
 * Replace target element inner html
 * @param string elementId
 * @param string text
 */
function replaceTextInElementById(elementId, text) {
  document.getElementById(elementId).innerHTML = text;
}

/**
 * Make ajax request and update hits counter
 * @param string url
 * @param string elementId
 */
function updateHitCounterText(url, elementId, count = false) {
  const hitCountDomain = 'rdyx';

  count && createHitCounterImgElement(hitCountDomain, url);

  return $.ajax('https://' + hitCountDomain + '.pythonanywhere.com/nocount', { data: { url: url } }).then(
    (hitCount) => {
      replaceTextInElementById(elementId, hitCount);
    }
  );
}

Calling it with:

<script type="text/javascript">
  postUrl = window.origin + '{{ site.baseurl }}/{{ post.url | remove_first: '/' }}';
  updateHitCounterText(postUrl, '{{post.url}}-hits-count');  // Add true as last arg if you want to increase counter
</script>

[brentvollebregt]

I've been looking at this for a bit now and am a bit unsure on how to fix this.

In summary, we cannot set withCredentials: true (credentials mode 'include') on a fetch/ajax call if Access-Control-Allow-Origin or Access-Control-Allow-Headers are set to *. To allow any site to hit this website though, we need to set Access-Control-Allow-Origin: *.

I do remember using flask-cors' supports_credentials=True to do something similar recently - however, I imagine I set Access-Control-Allow-Origin to something that was not * which makes this useless.

[Rdyx]

Hehe yeah I get to the same statement, one workaround that may work (but I'm totally unsure if this is "clean" and I doubt it) would to get the origin from request (Host) and send it in the proper response header?

Else, I guess there is no real solution indeed, maybe the workaround I found earlier (using hidden image + nocount URL to get count and show it where I want) would be the best one. But doing so would double any counter request :)

[brentvollebregt]

Ah yes, the origin! Putting the origin in Access-Control-Allow-Origin should work and defaulting it to '*' if no origin is available. I'll look into this now, thank you.