Occasionally, an AJAX request may be terminated when making multiple calls to the API

Within an application environment, a URL is being called via AJAX four times. Interestingly, on a specific page, the AJAX request gets canceled when attempting the fourth invocation.
The fourth request shows "Provisional headers are shown" in its request headers, and inexplicably, a fifth request (similar to the fourth) is triggered externally (not by the application).

https://i.sstatic.net/UMDpF.png

Through a detailed investigation using chrome://net-internals, I investigated the third and fourth requests and noticed significant differences in the HTTP_TRANSACTION_READ_HEADERS section of the network log.
Here is the complete data of the fourth request, which unexpectedly receives a 302 response unlike the previous three requests - 

t=61558 [st=  0] +REQUEST_ALIVE  [dt=274]
                  --> priority = "MEDIUM"
                  --> url = "https://example.com/api/v1/track/login?time=1556662845627"
t=61559 [st=  1]    NETWORK_DELEGATE_BEFORE_URL_REQUEST  [dt=0]
t=61559 [st=  1]   +URL_REQUEST_START_JOB  [dt=273]
                    --> load_flags = 0 (NORMAL)
                    --> method = "POST"
                    --> privacy_mode = 0
                    --> upload_id = "0"
                    --> url = "https://example.com/api/v1/track/login?time=1556662845627"
...
...

Here is the full data of the third request for comparison - 

t=61346 [st= 0] +REQUEST_ALIVE  [dt=97]
                 --> priority = "MEDIUM"
                 --> url = "https://test.undostres.com.mx/api/v1/track/login?time=1556662845405"
t=61346 [st= 0]    NETWORK_DELEGATE_BEFORE_URL_REQUEST  [dt=0]
t=61346 [st= 0]   +URL_REQUEST_START_JOB  [dt=97]
                   --> load_flags = 0 (NORMAL)
                   --> method = "POST"
                   --> privacy_mode = 0
                   --> upload_id = "0"
                   --> url = "https://test.undostres.com.mx/api/v1/track/login?time=1556662845405"
...
...

While troubleshooting, a potential solution was found using the following code - 

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Despite this resolution, it may not seem logical.

PS - Attached are some server logs. Notably, the same API begins returning a 302 status code after a number of attempts. Additionally, a similar issue is discussed here but did not provide a solution.

 189.213.84.17 - - [30/Apr/2019:22:19:31 -0500] "POST /api/v1/track/login?time=1556680771692 HTTP/1.1" 200 1316 "https://example.com/index.php" ...
189.213.84.17 - - [30/Apr/2019:22:19:32 -0500] "POST /api/v1/track/login?time=1556680772165 HTTP/1.1" 200 1316 "https://example.com/index.php" ...
189.213.84.17 - - [30/Apr/2019:22:19:32 -0500] "POST /api/v1/track/login?time=1556680772167 HTTP/1.1" 200 1316 "https://example.com/index.php" ...
189.213.84.17 - - [30/Apr/2019:22:19:32 -0500] "POST /api/v1/track/login?time=1556680772393 HTTP/1.1" 302 1534 "https://example.com/index.php" ...
javascriptajaxhttphttp-headerscontent-security-policy

Answer №1

Seems like your website server is redirecting to a non-secure URL

HTTP_TRANSACTION_READ_RESPONSE_HEADERS
                    --> HTTP/1.1 302
                        status: 302
                        date: Tue, 30 Apr 2019 22:20:45 GMT
                        content-type: text/html; charset=UTF-8
                        content-length: 0
                        location: http://example.com/api/v1/track/login?time=1556662845627

Chrome is not redirecting to the URL since it is already on HTTPS due to a meta tag in place. The issue seems to be with the server sending a redirect to an HTTP URL when HTTPS request is already being received.

Answer №2

The problem stemmed from a redirect at the application level (location:...) that was triggered by the ajax request.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve JSON encoded data from a separate AJAX request

Currently utilizing prestashop 1.6, I have a specific ajax function where I encode data that is successfully retrieved on the console using echo. Now, my task is to decode this JSON data in another ajax function in order to extract a value for a particular ...

javascriptphpajaxsmartyprestashop-1.6

Tips for updating a row in a table after receiving updated data through ajax in an MVC application

I have a data table with Add, Edit, and Delete options. When new data is added to the table, I append a new row based on the response. GetServerData("Supplier/AddSupplier/", Supplierdetails, function (data) { if (data != null) { var row = "" ...

jqueryajaxasp.net-mvc-4

Struggling to understand the process of retrieving information from an Axios promise

For my current project, I've been experimenting with using Axios to retrieve JSON data from a json-server to simulate a database environment. While I can successfully display the retrieved data within the .then() block of the Axios function, I'm ...

javascriptnode.jsaxiosnode-moduleses6-promise

What is the most effective way to prevent actions while waiting for ajax in each specific method?

Within my JS component, I have various methods that handle events like click events and trigger ajax requests. To prevent the scenario where multiple clicks on the same button result in several ajax requests being fired off simultaneously, I typically use ...

javascriptajax

The Node API is unresponsive when using Postman or accessing through the browser, as it is not returning any status code. However, no errors are displayed when

I am currently working on developing a Node API for an employee department model. I have created various requests such as 'GET', 'PUSH', 'PATCH', and 'DELETE' for both the employee and department endpoints. This deve ...

javascriptnode.jsexpresspostmanbody-parser

Connecting with Node JS, utilising the power of Socket.IO, Express, and establishing

Hey everyone, I have an interesting concept that I'd like to discuss with you to get your thoughts on its feasibility. The idea is to set up an RFID reader connected to a MacMini (with the Mini hidden and only the RFID visible). An iPad would also be ...

javascriptnode.jshttpexpresssocket.io

The value stored in the variable "string" is null due to the request parameter "data" not

I am currently working on a servlet that is designed to receive POST data from an AJAX request. Below is the client-side code snippet that I send: $.ajax({ type: "POST", url: "urlservlet", data: "{type:'" + "count ...

javaajaxjsonservlets

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

I am in the process of upgrading my project from polymer .5 to polymer 1.0. After installing the new version of the polymer library, iron element, and paper element, I encountered the following error: polymer-micro.html:63 Uncaught TypeError: prototype ...

javascripthtmlvisual-studio-2012polymernuget-package

What is the best way to refresh an Angular scope variable with data obtained from the Google Maps Places API?

I am looking to implement a feature where users can search for locations using the Google Places API. When they click on a specific location, I want to update a parameter value in the scope. Here is a visual representation: The Google integration works s ...

javascriptangularjsgoogle-maps-api-3

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

Attempting to postpone the execution by using setTimeout() within a loop

Currently, I am in the process of creating an automated script for a gambling website. Specifically, I am focusing on the roulette game mode where you have 20 seconds to choose a color and 10 seconds for the outcome to be revealed each round. My goal is to ...

javascriptwhile-loopsettimeoutdelay

Selecting an option from dropdown1 to retrieve a specific value from a JSON file

I currently have 2 dropdown lists to fill with data from a JSON file: $scope.categories = [ {name:"Blouse", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Shirt", sizes:["36","38","40","42","44","46","48","50"]}, {name:"Pants", size ...

javascriptangularjsjson

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

Encountered build issues while setting up a new project with additional dependencies. package.json: { "name": "my-files", "version": "1.0.0", "description": "App", "main": " ...

javascriptreactjstypescriptwebpack

Executing an Ajax PUT request on a select_tag element

I am currently working on a project where I have implemented a DropDown Menu in my View. This DropDown Menu has a Callback that triggers as soon as it detects the change event. My goal is to pass the selected value from the DropDown to my Line_items contro ...

jqueryruby-on-railsajaxspree

Creating a dynamic SlickGrid spreadsheet - a step-by-step guide

My curiosity has been peaked by the SlickGrid plugin. It caught my attention because of the spreadsheet example, but unfortunately I couldn't get it to work. Is it truly feasible to create a spreadsheet where you can select a range of cells and copy/p ...

javascriptjqueryslickgrid

Setting a single value for several identifiers within a JSON object

I'm new to JSON and I'm curious if it's possible to have a name/value pair with multiple names. Essentially, I want to be able to search for either name and retrieve the same value without having to update the value in two different places. ...

javascriptjson

Failure to send data through AJAX to index.php

$(document).on('click','.show_more',function(){ var no = $(this).attr('id'); $('.show_more').hide(); $('.loding').show(); $.ajax({ type:'POST', url:'index.php& ...

ajax

Is the && operator being utilized as a conditional statement?

While following a tutorial, I came across this code snippet that uses the 'and' operator in an unusual way. Is this related to React? Can someone provide an explanation or share documentation that clarifies it? {basket?.length > 0 && ...

javascriptreactjs

Using a different method to handle multiple callbacks in Angular or a suitable replacement for $.Callbacks

Is there a similar functionality in Angular to jQuery $.Callbacks? I am seeking a straightforward method to manage callback lists within Angular. My goal is to achieve the following using Angular: function Broadcast(){ var self= this; this._status ...

javascriptjqueryangularjs

Saving a MongoDB document within an array in Node.js and retrieving it

I am working on retrieving specific documents from MongoDB using Node.js and storing them in an array. const getStockComments = async (req) => { const stockname = req.params.stockName; var comments = []; var data = []; const stock = await sto ...

javascriptnode.jsmongodbasynchronousasync-await