AngularJS: Issues with retrieving response headers following a $resource $save operation

When I run the $save function, which triggers my angularJS $resource to send a POST request to my API, everything seems to be working fine. I can successfully debug into the success callback handler and confirm that the object is created in my API.

myObj.$save({}, function (value, responseHeaders) {
    myObj.someSuccessFunction();
}, function (responseText) {
    myObj.someFailureFunction();
});

However, there is an issue with the "responseHeaders" parameter. When I try to access it using "responseHeaders()", it returns an empty object. Specifically, I need to retrieve the "Location" response header like this: responseHeaders("Location").

Interestingly, when I debug in Chrome, I can see that the Response is populated correctly. It's just the "responseHeaders" object that remains empty for some reason.

Does anyone have any suggestions on how to access these responseHeaders properly?

Thank you!

javascriptangularjsangularjs-resource

Answer №1

Is it possible that a CORS problem is causing this? When making requests across different domains, ensure to include cors.exposed.headers in the pre-flight OPTIONS request.

Answer №2

When making a cross domain call, make sure to include the following header in your response headers:

Access-Control-Expose-Headers: Location

By adding this, the browser will be able to expose your custom headers and read it using Angular.

Answer №3

Encountering a similar issue with Spring Security 4.2 CORS filter and AngularJS. The client application, which is Angular JS-based, is unable to retrieve the customer authentication token from the response header sent by the Spring REST API.

To address this, I resolved the problem by exposing the following headers:

config.addExposedHeader("Origin");
config.addExposedHeader("X-Requested-With");
config.addExposedHeader("X-AUTH-TOKEN");
config.addExposedHeader("Content-Type");
config.addExposedHeader("Accept");
config.addExposedHeader("Authorization");
config.addExposedHeader("Location");

Following the implementation of the above solution, my Angular code was successfully able to access the headers.

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

Transmitting a variable string from JavaScript to PHP through AJAX

How can I pass a variable value from an HTML page using JavaScript to PHP? In my index.php file, I have the following code: $amount = $_GET['pricenumb']; echo $amount; Here is the JavaScript code I used to call on click of a button and send th ...

javascriptphpajax

Response from the server to multiple asynchronous XMLHttpRequests

I'm in the process of creating a Web Application that involves making multiple simultaneous XHR calls using Ajax instead of native Javascript. $.ajax({ type: 'POST', url: 'Services/Service.asmx/MyFunction', contentTyp ...

javascriptajaxweb-servicesweb-applicationsxmlhttprequest

Load external JSON file using THREE.JSONLoader (excluding models)

I'm attempting to use THREE.JSONLoader to load a JSON file that contains coordinates, not a JSON model. Here's what I'm aiming to achieve: var loader = new THREE.JSONLoader(); loader.load("coordinates.json", function(result) { console.log ...

javascriptjsonthree.js

"The authentication cookie fields are not defined when trying to get the authentication in the Express framework

After setting up my React client on port 3000 and Express on port 5000, I encountered an issue. When logging in, the cookie fields are set without any problems. However, when trying to retrieve the isauth value, it shows as undefined. //login log message ...

javascriptreactjsmongodbexpress

Generate a customizable button in Bootstrap using JavaScript extensions

After some investigation on Bugzilla, I discovered that by setting the options URL in install.rdf to arbitrary JavaScript, it can run smoothly. However, a strange issue arises where the window deactivates, as if an invisible dialog has appeared over it, ma ...

javascriptfirefox-addon

Attention: certain content may have been removed due to HTML sanitation

Hi there, I'm currently working on incorporating a search bar into a modal window by embedding HTML within the modal body. Here's how I've written the code: onClick() { const dialogRef = this.modal.alert() .size('lg' ...

javascriptangulartypescript

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

javascriptjquerycsswordpressicons

Incorporating Vuetify into a Vue CLI application with the help of webpack

I am facing an issue with my Vue CLI application that uses Webpack and Vuetify. The Vuetify components are not loading properly, and I keep getting the following warnings: Unknown custom element: < v-app > - did you register the component correctly? ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Is there a way to remove the bold styling from text next to JavaScript?

I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...

javascripthtmldreamweaver

The NPM Install process seems to be skipping certain files that were successfully installed in the past

When I first installed NPM Install in a folder, it created multiple folders and files: node_modules public src .DS_Store package.json package-lock.json webpack.config.js After that, npm start functioned perfectly. Now, as I embark on a new project for th ...

javascripthtmlnpm

Import a picture file into Photoshop and position it at a designated location

I need assistance with developing a function that can load an image and position it at specific x, y coordinates in Photoshop. Below is the code I have so far: var docRef = app.activeDocument; function MoveLayerTo(fLayer, fX, fY) { var Position = fLaye ...

javascriptphotoshop

Executing Javascript to populate a div element with content based on its CSS class

Is there a way to isolate my View (HTML & CSS files) within a controller like JavascriptCode/AJAX, so that upon page load, only the controller binds the data to a specific element such as a DIV based on its class? Do you think this is achievable? If so, ...

javascriptjqueryhtmlcss

The most basic form of req.body will consistently be devoid of any content

I am currently working on passing basic data from the client to the server using a POST request for testing purposes. However, I am encountering issues with receiving empty or undefined logs on req.body. Server: //jshint esversion:6 const express = requi ...

javascriptnode.js

Transferring Information from Service to Template through Controller and $stateParams

I am currently working on a service that has the following code: .service('ChatService', function() { return { //Retrieve data from controller sendData: function(data) { this.chatData = data; console.log('this.chatData: & ...

angularjsangularjs-scopeangularjs-controllerangular-services

What is the best way to implement the <b-pagination-nav> component in Bootstrap Vue?

I'm eager to begin using the featured in this guide. However, I'm struggling to figure out how to incorporate the tag into my website. The tutorial's instructions are unclear and as a newcomer, I'm finding it difficult to make it func ...

javascriptvue.jsbootstrap-vue

Discover the joy of reading with wrap/unwrap to consume more content in less

I am experimenting with a 'read-more read-less' feature using a wrap method that currently only works for the 'show more' functionality. So, to clarify, if the text exceeds a certain length, I truncate it and insert a read-more-link ( ...

javascripthtmljquerycssshow-hide

there is no minimum height specified for the table

Hey there! I'm working on a dynamic table that I populate using data from my API. However, I'm facing an issue where I want the table to maintain a minimum height when there are only a few results, but I can't seem to make it work. I attemp ...

javascripthtmlcss

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

What is the optimal number of parameters in JavaScript?

After stumbling upon a question on StackOverflow discussing the number of parameters in JavaScript functions (How many parameters are too many?), I started pondering if there is a real limitation on how many parameters a JS function can have. test(65536 ...

javascriptparametersecmascript-6standardsecmascript-5

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax