Django应用生产与开发环境中Ajax/Fetch请求的差异问题及解决

Update: Problem Resolved! #

The issue wasn't with the code itself, but with the HTTP server library being used. Gunicorn's default behavior couldn't meet the requirements. After researching, I switched to using Waitress as the alternative HTTP server library, and now the progress update feature works correctly.

Local Development Server (runserver) Behavior #

• My Django app uses Ajax requests to update HTML progress tags (currently using POST; GET also worked successfully on the dev server).
• Everything functions as expected: the Ajax request calls a function in view.py, which returns a JsonResponse with updated data generated by view-layer business logic.
• I use setInterval combined with setTimeout to control the number of requests, and call clearInterval when a specific value is reached.

Production Environment (Heroku) Behavior #

• The app is deployed to Heroku, and 99% of features work correctly: templates render properly, pages display normally, and form submissions process without issues.
• The remaining 1% problem: Ajax requests fail to fetch updated data, always returning the initial zero values. Console logs show the returned JSON data as:

  {games: 0, progress: 0, percentage: 0}
  {games: 0, progress: 0, percentage: 0}
  {games: 0, progress: 0, percentage: 0}
  {games: 0, progress: 0, percentage: 0}
  

• In contrast, on the local dev server, the returned data shows progress changes:

  {games: 5, progress: 1, percentage: 0}
  {games: 5, progress: 2, percentage: 0}
  {games: 5, progress: 3, percentage: 20}
  {games: 5, progress: 4, percentage: 40}
  {games: 5, progress: 5, percentage: 40}
  

Troubleshooting Steps Taken #

• I've done extensive research on this issue, and even switched from Ajax to Fetch() (though I don't believe the request method is the root cause).
• I'm wondering if there are any overlooked settings that could affect real-time page updates in the production environment.

Current Fetch Code #

$("#myButton").click(function call_fetch() {
 fetch('/progress/', {
 method: 'post',
 headers: {
 'X-CSRFToken': csrftoken
 },
 credentials: "same-origin"
 })
 .then( function(response) {
 if (response.status !== 200) {
 console.log('Looks like there was a problem. Status Code: ' + response.status);
 return;
 }
 // Examine the text in the response
 response.json().then(function(data) {
 console.log(data);
 document.getElementById("progressBar").max = data["games"];
 document.getElementById("progressBar").value = data["progress"];
 document.getElementById("progressGames").innerHTML = "Game " + data["progress"];
 document.getElementById("percentage").innerHTML = "Percentage Rate: " + data["percentage"] + "%";
 if (data["progress"] == data["games"] && data["progress"] != "0") {
 clearInterval(interval_id);
 document.forms.myForm.myButton.disabled = false;
 }
 });
 } )
 .catch(function(err) {
 console.log('Fetch Error :-S', err);
 });
 var interval_id = setInterval(setTimeout(call_fetch,2000), 2000);
 });

Additional Context #

• I'm not using class-based views, only two view functions: one for rendering the index.html page, and another for returning the JsonResponse to update progress.
• The app is deployed to Heroku using Python 3.6 and Django 1.10.6, and the environment runs normally otherwise.

内容的提问来源于stack exchange，提问作者Krusaderjake