Issue encountered while utilizing Rest Services within Angular JS in a Spring Boot environment

My Spring Boot application hosts REST services at the back-end with Angular on the front-end. I am making REST calls from the user interface.

Here is a snippet of my code:

$http.get(urls.USER_SERVICE_API)
                .then(
                    function (response) {
                        console.log('Successfully fetched all users');
                        $localStorage.users = response.data;
                        deferred.resolve(response);
                    },
                    function (errResponse) {
                        console.error('Error while loading users');
                        deferred.reject(errResponse);
                    }
                );


app.constant('urls', {
BASE: '<a class="vglnk" href="http://localhost:8081/SpringBootCRUDApp" rel="nofollow"><span>http</span><span>://</span><span>localhost</span><span>:</span><span>8081</span><span>/</span><span>SpringBootCRUDApp</span></a>',
USER_SERVICE_API : '<a class="vglnk" href="http://localhost:8081/SpringBootCRUDApp/api/user/" rel="nofollow"><span>http</span><span>://</span><span>localhost</span><span>:</span><span>8081</span><span>/</span><span>SpringBootCRUDApp</span><span>/</span><span>api</span><span>/</span><span>user</span><span>/</span></a>'
});

The error message in Google Chrome browser indicates:

angular.min.js:103 GET http://localhost:8081/SpringBootCRUDApp/%3Ca%20class=%22vglnk%22%20href=%22http://localhost:8080/SpringBootCRUDApp/api/user/%22%20rel=%22nofollow%22%3E%3Cspan%3Ehttp%3C/span%3E%3Cspan%3E://%3C/span%3E%3Cspan%3Elocalhost%3C/span%3E%3Cspan%3E:%3C/span%3E%3Cspan%3E8080%3C/span%3E%3Cspan%3E/%3C/span%3E%3Cspan%3ESpringBootCRUDApp%3C/span%3E%3Cspan%3E/%3C/span%3E%3Cspan%3Eapi%3C/span%3E%3Cspan%3E/%3C/span%3E%3Cspan%3Euser%3C/span%3E%3Cspan%3E/%3C/span%3E%3C/a%3E 404

https://i.sstatic.net/w6HDs.jpg

When I call the REST service using Postman, it works fine. However, I encounter an issue when making the same call from the UI. Please assist me in identifying what I might be doing wrong in the process of calling REST APIs from the UI.

The complete REST URL is ::

http://localhost:8081/SpringBootCRUDApp/api/user/

Your help is highly appreciated!

javascriptangularjsrestspring-bootjakarta-ee

Answer №1

Your app.constants file contains an incorrect URL. By updating it to the REST URL, you should see the expected outcome.

USER_SERVICE_API: '<a href="http://localhost:8081/SpringBootCRUDApp/api/user" rel="nofollow noreferrer">http://localhost:8081/SpringBootCRUDApp/api/user</a>'

The URL provided by you currently includes numerous unfamiliar elements.

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

TypeScript - Utilizing multiple parameters in a callback function

I am struggling with the code below: function builder<T extends Foo>( getItems: (...) => Promise<T[]>, /* uncertain about what to include in the parentheses here */ ) { return async (...): Promise<Baz> => { const items = a ...

javascripttypescript

Refine your MongoDB collections with multiple filtering options

My dataset looks like this: [ {"userId": "0000", "algorithm": "algo1", "status": "Running", "waitingTime": 0}, {"userId": "0001", "algorithm": &qu ...

javascriptmongodb

How to troubleshoot an Ionic exception occurring during the execution of any Ionic command?

Whenever I attempt to run an ionic command, I keep encountering this error message: { Error at FatalException.Exception (C:\Users\crist\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\cli-u ...

javascriptcordovanpmionic2ionic3

Tips for accessing user-defined headers within CORS middleware

I've developed a CORS middleware utilizing the CORS package. This middleware is invoked before each request. Here's how I implemented it: const corsMiddleware = async (req, callback) => { const { userid } = req.headers|| req.cookies {}; l ...

javascriptnode.jsexpresscors

initiating various nodemon instances using a bash script

We have transitioned to a microservices architecture and I am looking to implement a bash script that can easily switch between different locales of our service. As someone new to bash scripting, this is my initial attempt at creating such a script. #!/bi ...

javascriptnode.jsbashshellnodemon

Exploring the JSON data in Javascript using Ajax

Completely new to Javascript, I am just trying to grasp the basics of the language. Currently, I have a JSON request set up with the following code: function request(){ $.ajax({ dataType: "jsonp", type: 'GET', url: "getWebsite", ...

javascriptjqueryjsonajax

Problem with modifying the dom within the Directive's link method - Angularjs

I have set up a custom directive like this: .directive('ogTakeATour', function() { return { restrict: 'E', replace: true, templateUrl: '../scripts/directives/TakeATourTemplate.html', scope: { content: ...

angularjsangularjs-directive

Is it possible to invoke an AngularJs service by clicking a button?

Recently, I've been working on some AngularJS code involving a service and controller. angular.module('myModule', []).service("AttendanceService", function ($http) { this.getdata = function () { return $http({ ...

javascriptangularjsasp.net-mvc

One click wonder: Easily print any webpage content with just the click of a button!

For example, upon clicking the button on my webpage, I want the content of another page to be sent directly to a printer. The objective is to bypass the print dialog box and print preview that typically appears when using the browser's default printin ...

javajavascriptjquery

Can you show me the way to open a single card?

Can someone assist me in making it so only one card opens when clicked, rather than all of them opening at once? Additionally, if there is already an open card and I click on another one, the currently open card should close automatically. If you have any ...

javascripthtmljquerycsstoggle

I am tasked with creating an onScroll function that identifies the largest HTML element visible on the screen by utilizing the IDS contained within an array

I am looking to create an onScroll function that can identify the largest HTML element currently visible on the screen, based on the IDs stored in an array. For example, if "section1" takes up more space on the screen than "section2" as I scroll down the ...

javascriptreactjsonscroll

Do you need assistance with downloading files and disconnecting from clients?

When looking at the code snippet below: async function (req, res, next) { const fd = await fs.open("myfile.txt") fs.createReadStream(null, { fd, autoClose: false }) .on('error', next) .on('end', () => fs.close(fd)) . ...

javascriptnode.jsexpress

Tips for associating JSON data with a specific class

I have utilized Babel to create an ES6 class and now I am looking for a way to map JSON data from a server to this ES6 class. Is there a commonly used method to accomplish this task? User.js export default class User { constructor() { this.first ...

javascriptecmascript-6babeljs

Tips for decreasing the width of a Grid component in React using MUI

Is there a way to adjust the width of the initial Grid element within Material UI, allowing the remaining 3 elements to evenly occupy the extra space? see visual example Would modifying the grid item's 'xl', 'lg', 'md', ...

javascriptreactjsmaterial-ui

AngularJS modals enable users to interact with the background content in a

I'm looking for a way to enable users to drag and drop elements from the modal onto the background. Although my current modal is functioning well, it does not allow me to interact with elements on the background: var asideInstance = $aside.open({ ...

javascriptangularjstwitter-bootstrapmodal-dialog

Oops! The provided value for the argument "value" is not a valid query constraint. Firestore does not allow the use of "undefined" as a value

I encountered an error while exporting modules from file A and importing them into file B. When running file B, the error related to Firebase Cloud Firestore is displayed. const getMailEvents = (startTime, endTime) => { serverRef = db.collection("Ma ...

javascriptnode.jsfirebasegoogle-cloud-firestore

How can JSON data objects be transmitted to the HTML side?

I created a JSON object using Node JS functions, and now I'm looking to transfer this data to the HTML side in order to generate a table with it. However, I'm encountering difficulties sending the JSON object over because of my limited experience ...

javascripthtmlnode.jsexpress

Using two controllers for one template in AngularJS state provider routing: a guide

Exploring the use of state provider for routing, I am faced with a challenge. How can I incorporate two controllers for a single template? What would be the correct syntax to achieve this? I have attempted the following approach: $stateProvider.state("ho ...

angularjsroutesangular-ui-router

Creating an array of objects in Node.js can be achieved by simply declaring an array

Here's the structure of my class: var Coin = { _id: null, createGame: function(id) { this._id = id; }, start: function() { } }; My issue is that I am unable to create an array of objects, as I can only create one. Can someo ...

javascriptnode.js

Link AngularJS service array length property to the controller's scope through binding

I am attempting to connect the length of an array from another service to my controller's scope in the following manner: app.controller('TestCtrl', function ($scope, safePostService) { $scope.count = safePostService.queue.length; $ ...

javascriptangularjs