The behavior of relative paths in Ajax can vary depending on the environment in which it

This website is built using SpringBoot. The URL for the HTML page is . Here is a segment of JavaScript code found on the index page:

$(function(){

jQuery.ajax({
    contentType:'application/json;charset=UTF-8',
    type: "POST",
    url: "getSignTypes",
    cache: false,
    dataType: "json",
    success:function(data){
            if(data !== 'NA'){
                console.log(data);
                $('#signType').combobox({
                    valueField:'id',
                    textField:'title',
                    editable:false,
                    data:data,
                    value:data[0].id
                });
            }
    },
    error:function(msg){
        console.log(msg)
    }
});
})

I have noticed that I am using a relative path in the URL parameter of this ajax request. After testing it locally, I realized that the relative URL should be converted to , and indeed it works as expected when accessed from http://localhost:8088/trex/index/getSignTypes.

However, upon deploying it to the UAT environment, I observed that the URL gets converted to with the 'index' part missing. Why does a relative path in Ajax behave differently in different environments even though the code remains unchanged? Are there any pointers I can follow to identify the discrepancies? Thanks in advance.

I have attached a screenshot of the issue encountered in the UAT environment: https://i.sstatic.net/QOM5a.png

Answer №1

When constructing a HTTP URL, there are various components to consider: the protocol, hostname, port, username, password, path, query string (represented by ?....), and fragment (denoted by #....).

If we take a closer look, it's evident that the URL path concludes with / in the development environment but lacks it in UAT. One way to visualize this is by likening it to "directories": for instance, /trex/index/ would be an empty file name within the /trex/index directory, while /trex/index refers to the file named index in the /trex directory. While web servers might handle these scenarios similarly, clients may not interpret them the same way. Therefore, when generating relative paths from these locations, the resulting URLs could differ significantly.

To address this issue, implementing a redirect rule can help prevent inadvertent variations in URL construction. For example, setting up a redirection from /trex/index to /trex/index/ ensures uniformity and consistency in how URLs are structured.

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

When a React page is re-rendered using useEffect, it automatically scrolls back to the

Every time I utilize the <Tabs> component, the onChange method triggers the handleTabChange function. This leads to the component being called again and after repainting, the useEffect is triggered causing the page to scroll back to the top. How can ...

Caution: Updating a component is not possible during the rendering of another component. ReactJS

I am encountering an error in my ReactHooks/Typescript application with a Navigation component that renders a PatientInfo component. The PatientInfo component is conditionally rendered based on the props it receives, determined by a searchbox in another ch ...

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

Tips for managing pagination in a Single Page Application

Within my Single Page Application (built with Javascript and AngularJs), I have an items list that is paginated, displaying 10 items per page. To ensure that the user's current pagination remains intact even when navigating to other pages, I store th ...

Tips for evaluating the performance of webGL clients using three.js

Currently, I am working on a graphic project utilizing three.JS and I am interested in automatically assessing the GPU performance of my client's device. This will help me determine the optimal number of elements to load in the application. Essentiall ...

Purging the Activity Stack upon Initiating an Intent

I'm currently developing an app that starts with a Login/Create New Account splash screen. Within the onCreate method, my app checks the SharedPreferences to see if user credentials are already stored. If they are, the app launches the main activity d ...

Is it possible for the controller of a modal window to have access to functions within the parent controller

If you were to launch a modal window using $modal.open from an angular directive, would the modal window be able to access functions defined within the parent directive? Below is the code for the directive controller: function parentFunction() { re ...

"Encountered an issue while exporting the application" in Eclipse version 4.4.1 for Android using ADT 23.0.4

During the process of exporting my Android app from Eclipse, everything seems to be going smoothly at first. However, after a short period of time (when it should ideally take just a minute), the process fails and I am met with this error message: Faile ...

"Enhance your experience by multiplying items with just a click on a designated list item + using

I am facing a major issue that I can't seem to resolve. I am using Leaflet to display a map combined with AJAX. When I click on a country, a list of "customers" is displayed. However, when I click on a specific customer for more information, the custo ...

Is it possible to utilize Shared Preferences in a class without the need to extend AppCompatActivity?

When attempting to utilize shared preferences in my class, I encounter an error message stating "Cannot resolve method 'getSharedPreferences(java.lang.String, int)'. Here is the snippet of code: public class FetchData extends AsyncTask<Void, ...

AngularJS select directive is failing to set the default option in the dropdown menu

I have been learning AngularJS through a tutorial and wanted to implement form validation. I attempted to set a default option for the select element. Despite adding selected="", the default option is not displaying in the browser. Interestingly, when I ...

Minimize redundancy in the process of adding functions to a function queue

Currently, I am delving into JavaScript animations and utilizing multiple functions to add components to the animation queue. The structure of these functions is quite repetitive as shown below: function foo(arg1, arg2) { _eventQueue.push(function() { ...

Vuejs v-for nested loops

After spending countless hours researching, I am determined to solve this problem. My objective is to create a questionnaire similar to a Google Form, with question groups, questions, and answers. The structure of my data looks like this: question_group: ...

Adjusting the demonstration of the d3 force-directed graph

Recently, I have started learning about javascript and D3.js, and I am eager to grasp their functionalities. My current focus is on experimenting with the force-directed graph example available at: http://bl.ocks.org/mbostock/4062045 My goal is to modify ...

Removing an item from an array in Mongoose

I'm encountering an issue with removing an Object from an Array and I'm unsure of the correct way to use $pull for this action. Any help would be greatly appreciated! JSON data "accountId": "62efd8c008f424af397b415d", "l ...

The Hibernate error message says: "Unable to add or update a child record due to a foreign key constraint violation in java.sql.SQLIntegrityConstraintViolationException

Exploring the realm of Jpa, I encountered an issue while attempting to establish a one-to-one relationship. The program threw the following exception during execution: ERROR: Cannot add or update a child row: a foreign key constraint fails (`ngsharma`.` ...

Cloning a checkbox using Jquery

I am working on a search page that utilizes checkboxes to display results. After the user selects certain options and triggers a reload of the page, I want to provide an easy way for them to remove their selections by displaying them at the top of the page ...

Converting Blob Data to JPG Image: A Step-by-Step Guide

Currently, I am utilizing croper.js to crop and save an image. However, the function that processes the cropped blob to convert the image format is not functioning correctly. cropper.getCroppedCanvas().toBlob(function (blob) { var formData = ...

Ways to extract information from a dynamically generated table

I'm facing an issue with retrieving data from a dynamically generated table within my script... Here is the code snippet: $('#update_panel').html('Loading Date....'); $.ajax({ url: '/Home/GetCountries', type: & ...

What is the best way to transfer an ID to a dropdown selection list?

Whenever a user chooses an option from a drop-down menu, an event needs to be triggered. I have a checkbox that retrieves an ID from the database; based on this ID, a user can be added or removed from the drop-down menu. var ajReq = new XMLHttpRequest(); ...