Access a tomcat server's war URL from an external HTML page with the help of AJAX commands

Currently, I am utilizing apache-tomcat-7.0.67 and have deployed a JAR file within the webapps folder with the name of:

Account

The WAR file was generated using Spring Boot, so there is no explicit definition of web.xml. However, the URL mapping has been specified using 

@RequestMapping(value="/submitForm",method = RequestMethod.POST)
. Whenever I access this URL from tools like Postman or JMeter, such as 
http://localhost:8080/Account/submitForm
, the request successfully reaches the server and a response is returned.
Currently, I have another directory that solely contains HTML files which are not present in the WAR file, similar to this https://i.sstatic.net/im3i5.png.

This directory hosts several HTML files that include AJAX calls using JavaScript like:

$.ajax({
                type: 'POST',
                url: '/Account/submitForm',
                 success: function (resp) {
                 console.log(resp);
                },
                error: function(e) {
                console.log('Error: ',e);
                }  
            });

However, even after attempting to send a request to the server using URL: 

'http://localhost:8080/Account/submitForm'
, the request never seems to reach the server. Can someone kindly provide guidance on how to address this issue? I seem to be at an impasse.

javascriptjavaajaxspringtomcat

Answer №1

Consider avoiding using the title of your conflict

This is the specific appeal I am making

$.ajax( ... url: "../UI/ResponseDuration", ...

Additionally, include this note in my category

@WebServlet(name = "ResponseDuration", urlPatterns = {"/UI/ResponseDuration"})

It operates without being dependent on the file's conflict name

Answer №2

The issue at hand stems from the JavaScript cross-domain origin policy, which restricts AJAX calls from a static HTML file outside of my WAR file. I was able to resolve this by incorporating the following code snippet in Tomcat's `web.xml` file:

<filter>
 <filter-name>CorsFilter</filter-name>
 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

In addition, Spring Framework offers built-in support for addressing cross-origin issues, as detailed in this informative article: cors-support-in-spring-framework. The W3C CORS specification can be referenced here: W3 cors specification

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

Deactivating a hyperlink on my print-friendly webpage with JavaScript

My code is designed to generate a printable version of a webpage by duplicating the HTML content and then making certain modifications, such as deactivating buttons upon page load. In addition to disabling buttons, I also aim to deactivate all links on th ...

javascripthtmlanchor

Utilize AngularJs and JavaScript to upload information to a JSON file

Exploring the realm of Angular JS, I am on a quest to create a CRUD form using AngularJs and Json with pure javascript without involving any other server side language. The script seems to be functioning well but is facing an obstacle when it comes to writ ...

javascriptjqueryjsonangularjsangularjs-scope

The functionality of 'Access-Control-Allow-Origin': '*' is not operational

I attempted to address all inquiries pertaining to this tag, yet I encountered a hurdle. Where did I go wrong? $(document).ready(function () { $.ajax({ type: "GET", url: "http://www.tcmb.gov.tr/kurlar/today.xml", dataType: "xml ...

javascriptjqueryasp.netajax

JQuery Ajax Success does not fire as expected

I am facing an issue with my ajax call where the success function is not getting triggered. My controller gets called and the code executes without any errors. However, since my method returns void, I am not returning anything. Could this be the reason why ...

javascriptjqueryajaxasp.net-mvc

Issue with sending array as parameter in ajax call in Laravel

I am currently encountering an issue while attempting to pass an array through an AJAX request. <input type="text" name="item_name[]"> <input type="text" name="address"> $(document).on('click', '#save_info', function () { ...

javascriptajaxlaravel-5

What are the advantages of using WebSockets instead of AJAX for client communications?

Currently delving into websockets and the stomp protocol, I'm truly fascinated by the ability to send data from the server to clients. However, I find myself somewhat taken aback by the send() method for sending data from client to server. Since send( ...

ajaxwebsocketstomp

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

What is the reason for using 'app' as the top-level directory name in React Native import statements within a project setting?

Seeking to comprehend the imports within React Native source code, specifically in a file named questionnaire.actions.js, relative to the top-level directory called lucy-app: ./src/containers/newUserOnboarding/questionnaire/questionnaire.actions.js The m ...

javascriptreactjsreact-native

The search button is malfunctioning after I submit search data and generate dynamic HTML using axios

When a user clicks on the search button, I retrieve the input value and then use axios to send a GET request with the search data. Everything works fine, but when I query the database and dynamically create data from the mongoose data, the page reloads w ...

javascriptnode.jsweb

There was an issue while trying to interpret the JSON

Working with Volley and org.json to retrieve a JSON from a user's timeline on Twitter. Received an "Error with Request" in onErrorResponse. The issue doesn't seem to be a URL problem as the desired JSON is visible in LogCat. Here is the error log ...

javajsontwitterandroid-volley

Blocking negative values when a button is clicked in Vue.js using v-on:click

How can I prevent the counter from going below 0 when clicked in this Vue component? Do I need to create a separate method to block it? Thank you for your assistance. <button v-on:click="counter.document -= 1">-</button> <h3>{{coun ...

javascriptvue.js

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

javascripthtmlgrid-layout

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

javajavascriptjsonspring

In the world of React in Meteor, the command event.preventDefault() doesn't seem

I have encountered an issue with my application development. I am utilizing a submit form in Meteor with React, and although I am using event.preventDefault(), the page continues to reload every time the submit button is clicked. Following a brief delay, i ...

javascriptreactjsmeteor

Next.js example encounters JSON parsing issues with Transformer.js model

While using Brave browser Version 1.61.101 Chromium: 120.0.6099.71 (Official Build) (x86_64) (and also on Chrome Version 120.0.6099.62 (Official Build) (x86_64) without encountering any errors), I faced a JSON parsing issue when attempting to run the clien ...

javascriptnext.jshuggingface-transformersbrave

Simulating a JavaScript constructor using Sinon.JS

I need to write unit tests for the ES6 class below: // service.js const InternalService = require('internal-service'); class Service { constructor(args) { this.internalService = new InternalService(args); } getData(args) { let ...

javascriptnode.jsunit-testingmockingsinon

When using a variable to fetch data in JSON, an undefined error occurs. However, if a hardcoded index

I am facing an issue while trying to extract and manipulate JSON data from a file for an application I am developing. When looping through the data, I encounter an undefined error that seems to indicate a missing property in the JSON object when accessing ...

javascriptjson

Deliver an index.html file upon server creation

My goal is to have the server load a file called index.html when it is created. Currently, when I run the server.js file using node, it responds with text using res.end("text"). However, I want the index.html file to be displayed instead. I attempted to a ...

javascriptnode.jsexpress

Issue: "Attempting to use methods on masonry before it has been initialized" error arises when integrating masonry grid with a WordPress search and filter plugin

I am attempting to utilize the Masonry grid in conjunction with the WordPress plugin Search and Filter Pro, using ajax to dynamically load posts based on filtering. However, I am encountering the following error: Error: “cannot call methods on masonry p ...

ajaxwordpressmasonry

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

I recently made a decision to develop a wizard form using HTML 5 (specifically ASP.NET MVC). Below is the structure of my HTML form: @using (Html.BeginForm()) { <div class="wizard-step"> <input type="text" name="firstname" placeholder ...

javascriptjqueryhtmlasp.net-mvc-4wizard