Unable to retrieve custom CSS and JS files hosted on the server

Encountering Server Issue

My server is returning a 404 NOT FOUND error when trying to access my static files: css and js. In IntelliJ IDEA, the path appears correct as shown in the image https://i.stack.imgur.com/nTFv9.png.

However, upon accessing the page on login.jsp, the browser displays the following message in the console:

GET http://localhost:8087/static/css/actionForm.css net::ERR_ABORTED 404 (Not Found)

While JS and CSS files from CDNs like Bootstrap work fine, custom files are failing to load.

Previously, everything worked well in this project, but now I am unsure of what caused this error.

Attempts at Resolution

I have tried adjusting the relative path of the project and using asset methods in the src parameter, but nothing has solved the issue. While there are suggestions involving the server.js file, I believe the solution may lie elsewhere.

Below is the expanded project structure with the static directory:

https://i.stack.imgur.com/ag51I.png

The WAR was deployed successfully, with the structure as depicted below, yet the server is unable to access these specific files.

https://i.stack.imgur.com/3FImC.png

The logs indicate the following:

2021-01-05 23:00:47 [DEBUG] DispatcherServlet:865 - DispatcherServlet with name 'dispatcher' processing GET request for [/static/css/actionForm.css]
2021-01-05 23:00:47 [DEBUG] RequestMappingHandlerMapping:304 - Looking up handler method for path /static/css/actionForm.css
2021-01-05 23:00:47 [DEBUG] RequestMappingHandlerMapping:314 - Did not find handler method for [/static/css/actionForm.css]
2021-01-05 23:00:47 [WARN ] PageNotFound:1147 - No mapping found for HTTP request with URI [/static/css/actionForm.css] in DispatcherServlet with name 'dispatcher'

Answer №1

After some troubleshooting, I successfully resolved the issue by relocating my files `main.jsp` and `login.jsp` to a new `jsp` directory and eliminating the use of Spring in my project. Much appreciation for all the helpful responses provided.

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

Implementing Promises in AngularJS Controller: A Comprehensive Guide

I'm currently working on implementing a basic function using promises in one of my controllers to make sure it works correctly before adding more complex functionality. I keep running into a "TypeError: undefined is not a function" error when trying t ...

having trouble initializing the tomcat server within eclipse

Upon changing my application to a spring webflow application, I encountered difficulties starting it up on the server. Nov 10, 2015 11:53:36 PM org.apache.catalina.core.StandardEngine startInternal INFO: Starting Servlet Engine: Apache Tomcat/7.0.64 Nov 1 ...

Separating stylesheets, head, and other elements in a curl response

After successfully using curl to retrieve an external site, I noticed that the results were interfering with my own content. The CSS from the external site was affecting my webpage's layout and z-index values were conflicting. I am seeking a solution ...

Divide information in the chart

<table id="tab"> <tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr> <tr><td class="sub">lllll</td><td class="sub">wwwww&l ...

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions

I am facing an issue in my class where I have multiple methods and properties. One of these methods contains a setTimeout() function as follows: function myClass() { this.some_property = "test"; this.PrintOnTimeout = function() { // I thou ...

React-Redux showing no errors despite non-functional Redux store

I'm currently facing an issue with integrating React-Redux into my React Native/Expo project. Despite not receiving any console error messages, the data from the Redux store is not displaying in the user interface. Below are some key files related to ...

Substitute the functions within a Node.js module with simulated functions

I am currently working on a Node.js project that serves as an API wrapper. To ensure the reliability of my code, I am writing unit tests using nodeunit and need to incorporate mock functions into the module. For instance, I require a function that mimics s ...

The value of $parent.$index will consistently be 0 in all cases

I am currently dealing with a nested ng-repeat situation where I am attempting to determine the parent's index. Due to the fact that it is being arranged post-process, the standard ng-repeat="(step_index, step) in flow" method is not working for m ...

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

Unique text: "Enhancing User Interaction: Using a custom directive to dynamically evaluate

Introduction: A simple demonstration of HTML structure: <td ng-repeat="col in cols"> <div ng-bind-html="col.safeHTML"></div> </td> JavaScript controller code snippet: $scope.cols = [ { field : 'logo&apos ...

The Ajax request is displaying the URL instead of the expected posted data

Here is the html code along with JavaScript that I am working on: <div id="input_form"> <fieldset> <form id="myform" method="post" action=""> seq: <input type="text" name="seq" id = "seq"><br><br> ...

The element is currently in the DOM, but is unresponsive to any interactions

Recently, I've been experimenting with the functionality of this interesting website at . One challenge I encountered was the need for my program to automatically press a toggle button (which toggles the sidebar content visibility) in case manual inte ...

Choosing elements in jQuery

Having some trouble with the subnav on my current website project. I think the issue lies in how I am selecting items in my jquery code. It seems like a small fix that needs to be made, but I'm unsure of the correct approach. http://jsfiddle.net/ZDEr ...

Is there a way to trigger a function with the onclick event in NextJs?

Working on my NestJS project, I am still a beginner in the field. My current task involves creating a web application that displays a leaflet map with clickable tiles. Each tile should have a button that triggers a specific function when clicked. However, ...

Problems with navigation, not functioning properly due to issues with Pulled functions

I am still getting the hang of things and struggling with the terminology, so please bear with me as I try to explain my issue. Currently, I am working on a project in react native where I have two files - Header.js and footer.js. I have successfully impo ...

Using ReactJS and Ruby on Rails to implement an AJAX delete request

There is a component named Items residing inside a parent component called ItemsContainer. A click on a button within the Items component triggers an Ajax function to delete that specific Item. However, I am encountering a 500 error message at the moment ...

Encountering an error when utilizing Firefox version 35 with protractor

When running my Angular app scenarios with Chrome, everything runs smoothly. However, I encounter a halt when trying to run the scenarios on Firefox version 35.0b6. Any help would be greatly appreciated. Thank you in advance. I am currently using Protract ...

Error: The function cannot be performed on _nextProps.children

I'm having trouble implementing react context with nextJS and I keep encountering this error: Server Error TypeError: _nextProps.children is not a function This is my code for _App.js: import Head from "next/head"; import Router from &q ...

What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

I'm faced with a code snippet that looks like this. class Base{ private getData(): Data | undefined{ return undefined } public get output(): Data | undefined { return { data: this.getData() } } } class ...

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...