Angular controller makes several $http requests to a cross-origin REST API

I'm currently attempting to make multiple GET requests to my own REST API built in Java using Spring. Out of every 10 times, both requests are handled successfully 3 times and 7 times one of the HTTP requests fails with a 'No Access-Control-Allow-Origin header is present on the requested resource' error. My REST Controller code snippet looks like this:

@RestController
@CrossOrigin
@RequestMapping("/person")
public class PersonRestController {

@Autowired
ActivityTracker tracker;

@RequestMapping(method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
public void addPerson(@RequestBody Person person){
    tracker.addPerson(person);
}

// Other Endpoint Methods...

}

My Angular application's structure goes as follows:

angular.module('trackerApp', ['ngCookies', 'ui.router', 'pascalprecht.translate'])
.config(function($stateProvider, $urlRouterProvider, $translateProvider){
    // Configuration settings

})

.controller('personDetailController', function($http, $stateParams){
    // Angular controller logic

});

Most of the time, both GET requests are processed without any issues and show the expected results. However, sometimes only one request fails and returns an error message stating:

XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 500.

It's puzzling why sometimes both requests are successful while other times only one of them fails?

I have also made attempts such as using @ResponseBody, setting headers, and configuring XML setup.

Answer №1

Be sure to examine the request headers, ensuring that the server is sending the Access-Control-Allow-Origin header. For more information, you can visit http://enable-cors.org

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

Show and conceal a search container with jQuery

I am in the process of designing a website that features a search icon within the navbar. When the user clicks on the search icon, it should disappear by applying the "hide" class to itself. Additionally, the hide class should be removed from a separate se ...

Flip words that have over 4 characters

I need some assistance understanding why my function is consistently returning undefined. The desired output involves reversing each word in a string that has more than 4 characters. As a bit of a JavaScript beginner, this issue has been quite baffling f ...

AngularJS does not refresh ng-model when ng-options changes

Whenever I update the value in the dropdown, my optionType doesn't seem to be getting updated. <select ng-model="optionType" ng-options="op.option for op in ops" ng-change="optionChanged()"></select> I've implemented ng-change to de ...

Combining React, Express, and Nodemailer poses challenges in rendering components and sending emails simultaneously

Looking to utilize client-side routing for my React app and also incorporate Nodemailer for sending emails. However, since Nodemailer cannot be used on the client-side, I need to implement it on the Express server. Here is how the server code looks like: ...

Upload a JSON object into the database retrieved from a specific URL

I'm embarking on the journey of REST APIs and I have a specific requirement: I have raw JSON text at a certain URL that I want to fetch with my application and later insert it into the DB as a previously created model using EF. C# NET-CORE 2.2. If my ...

Using Angular directives with ng-repeat and transclude feature

How can I create a customized table template using angularjs? I am facing issues with the isolated scope of ng-repeat when trying to make columns customizable. Is there any way to access the ng-repeat scopes within the transclude of the columns? <a-Tab ...

What is the procedure for transforming a JSON response into an array?

In my JSON response, I would like the values to be listed instead of appearing as a comma-separated single line. Here is a snippet of my code: URL url = new URL(urlStr); HttpURLConnection con = (HttpURLConnection) url.openConnection(); con.setRequestMeth ...

What is the reason for the original list being affected when the cloning list is created using a

I am trying to convert an object inside an array into a string using the code below. However, I can't seem to understand why it's affecting the original array. I thought that 'slice' was supposed to clone the array? var cloned = $scope ...

Is there a way to utilize variables from a source XML file to establish points on an SVG polygon?

I've been struggling to figure out if it's possible to dynamically set points on an SVG polygon using variables that are defined by an XML document which is constantly changing. All I want is to set the path like this: var polygonToUse = window. ...

Comparing the parsing of fetch() JSON response output in Node.js to parsing a JSON variable

Could someone clarify the difference between parsing a Variable JSON object and parsing fetch() response data JSON object stored in a variable? For example: If we have a variable like this: var myJSON = { "items" : [ { "id" : &q ...

Create a distributive and an NPM package using one source code

Creating small open source tools is a passion of mine, and I strive to provide the best experience for my users. My packages usually consist of just one function, so here's what I aim to offer: A JavaScript file that users can easily add by including ...

Is it possible for jQuery to navigate to a different page, extract around 10 links, and then incorporate them into the original page?

Apologies if the title of my question is unclear, allow me to clarify. I'm interested in exploring the possibility of a specific task and would appreciate guidance on how to proceed. While I haven't attempted it myself yet, I am eager to learn mo ...

Improving conditional rendering in Mui <Cards> component by fixing state behavior

I have a situation where I want to display a Floating Action Button inside each Mui card when hovered over. However, I'm running into an issue with the hover state affecting all cards instead of just the one being interacted with. How can I ensure tha ...

Is it possible to transfer a massive number of files using node.js?

I need to asynchronously copy a large number of files, about 25000 in total. I am currently using the library found at this link: https://github.com/stephenmathieson/node-cp. Below is the code snippet I am using: for(var i = 0; i < 25000; i++ ...

When the button is clicked, display in the console the data retrieved from the API

Programming Section import react, { useEffect } from 'react'; import './styles.css'; export default function App() { useEffect(() => { fetch('https://jsonplaceholder.typicode.com/todos') .then((response) => ...

When making a JavaScript ajax request, Django is not being activated

I'm struggling to implement a feature where the text on a webpage changes based on the selection made in a dropdown menu. My JavaScript code doesn't seem to be calling the Django function correctly, so the placeholder text remains unchanged. Jav ...

Delete any classes that start with a specific prefix

Within my code, there is a div that holds an id="a". Attached to this div are multiple classes from different groups, each with a unique prefix. I am uncertain about which specific class from the group is applied to the div in JavaScript. My goal is to r ...

What is the best way to locate an item reference for a specific DOM element?

Imagine a vast DOM structure with approximately 10,000 HTML elements, including 1,000 span tags. None of the span elements have any identifiers and are buried deep within other objects with long, complex Xpath paths that are not user-friendly for selectio ...

What is the best way to integrate these two controllers for an Ionic application?

Here are the links to my Todo List and Custom Timer: Todo List, Custom Timer I am trying to combine a timer with a Todolist. While they both work individually, they do not function together as expected. Whenever I try to add a new ng-controller for the ta ...

Data not showing up in res.render

I've developed a function that organizes email addresses in various formats and validates them. While everything is functioning correctly on the server-side, I'm encountering difficulties trying to showcase the results within my Jade template. De ...