The function XmlHttpRequest getResponseHeaders() is not providing a complete list of all headers

Has anyone encountered the issue where jQuery's xhr method, getAllResponseHeaders, only displays the "Content-Type" header when trying to retrieve response headers from an ajax request?

Below are the response headers:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: If-Modified-Since, Cache-Control, Content-Type, Keep-Alive, X-Requested-With, Authorization
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1728000
Authorization: apikey="apikey1" AuthenticationToken="62364GJHGJHG"
Connection: keep-alive
Content-Length: 240
Content-Type: application/json; charset=utf-8
X-Powered-By: Express

The success function looks like this:

params.success = function (response, textStatus, jqXHR) {
  console.log(jqXHR.getAllResponseHeaders())
}

This is the output it logs:
Content-Type: application/json; charset=utf-8

Answer №1

Just encountered this issue recently. The reason behind it is due to making a CORS request without exposing the Location header.

To fix this problem, you should include Access-Control-Expose-Headers in your preflight CORS response when using Express:

res.header('Access-Control-Expose-Headers', 'Content-Type, Location');
res.send(200);

This solution should resolve the issue at hand.

Answer №2

based on the information provided below

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

The Access-Control-Expose-Headers response header identifies the specific headers that can be revealed in the response by listing their names.

By default, only the 7 CORS-safelisted response headers are made visible:

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

This approach allows all headers to be accessed and exposed with ease

res.header('Access-Control-Expose-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

Effectively monitoring coordinates on both the client and server sides

I'm currently in the process of developing a multiplayer game using websockets, node, and JavaScript. I need advice on the most effective approach to update client information and manage their coordinates on the server. The method I am using at the mo ...

The Select2 ajax process runs twice

I am encountering an issue with a script I have that retrieves data from the backend to populate a select2 dropdown. The problem is that the ajax call is being triggered twice every time, which is not the desired behavior. I'm unsure of what mistake I ...

"What is the best way to retrieve the id of the element that triggered a JavaScript onclick

I'm facing an issue with my GridView where I have information displayed in each row. When a user clicks on a row, more related information is supposed to be shown in a separate DIV. However, I am unable to target the specific row when trying to change ...

What is the best way to transfer JSON data to a different controller in AngularJS?

Hello, I'm still learning AngularJS and facing an issue with the following code snippet. app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: "partials/home.html", controller: "mainControlle ...

Guide on removing the <hr/> tag only from the final list item (li) in an Angular

This is my Angular view <li class= "riskmanagementlink" ng-repeat="link in links"> <h3> {{link.Description}} </h3> <a> {{link.Title}} </a> <hr/> </li> I need assistance with removing the hr tag for the l ...

Creating a dynamic step animation with jQuery: A step-by-step guide

Struggling to find resources on how to animate a color wheel using jQuery? Want to create a spiraling effect by gradually revealing colors at 45-degree intervals, like a loading GIF spiral? I need it to cycle through the defined colors in order and then cl ...

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

My current setup involves using babelify 7.2.0 with Gulp, but I've encountered an error when working with the following code snippet: class One {} class Two extends One { constructor() { this.name = 'John'; } } The issue at hand i ...

Selection Change Event for Dropdown Menu

Just starting to learn JavaScript and currently working with 3 select elements on a JSP page: <select id="railwayServiceList" name="railwayService_id" onchange="changeCompaniesCombo()"></select> <select id="companyList" name="company_i ...

Creating an API using a JSON file in Node.js

I am currently working on creating an API using Node.js with a JSON file. Initially, I set up a simple GET request in Node.js from the JSON file to filter out unnecessary data and build a new response based on the content of the JSON file. The code snipp ...

Encountering an issue when implementing a conditional check within the .map() function utilizing ES6 syntax

I'm struggling to assign only the object that contains an iban value to the list in the code snippet below. I haven't been able to fix this issue on my own and would appreciate some assistance. This.ibanList = this.data.map( (value, in ...

Experiencing an issue in React client-side where Credentials cannot be accessed post authorization login in NodeJS

I am attempting to troubleshoot an issue with my credetrials within the server code. When I try to log in from the client side, the credetrials are not recognized within the router.get('/auth/login') method. However, when I perform the same login ...

Troubleshooting issue: JSON object is returning undefined despite its presence in NASA API integration with ReactJS

{this.imageRenderer(item.data[0].media_type, item.links[1], item.links[0])} When trying to access item.links, it shows as undefined even though it is present. (Data is retrieved from NASA API) Image: As seen above, the links attribute exists. I am puzzle ...

Leveraging external data for testing in Protractor script

I am encountering an issue while attempting to access test data using JSON, as it keeps showing up as undefined. I am implementing a Page Object Model and trying to reference external test data. However, when passing the values from my test data into a fun ...

Using Plotly.js within a deleted Vue.js component may result in displaying an incorrect chart

Issue I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible. To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/ Solution Attempted I attem ...

Using Vue JS to apply a filter to data fetched from an API

Within my code, I attempted to retrieve users with the role of Admin and only their usernames from the API JSON data. However, I encountered an issue where it did not work as expected. "response": [ { "profil ...

Integrate Ruby parameter into JavaScript in Rails

I have a div that I want to turn into a link to another page. Typically, we achieve this using link_to link. <% for item in @items %> <%= link_to "Item", item %> # -> or <%= link_to(item) %> <% end %> However, I need the ent ...

What is the method for assigning a string to module variable definitions?

As someone new to TypeScript and MVC, I find myself unsure if I am even asking the right questions. I have multiple TypeScript files with identical functionality that are used across various search screens. My goal is to consolidate these into a single fil ...

Guide to uploading a file and transferring it to a different server using Node.js (specifically express.js)

Individual utilizes the input(type="file") method to upload a file onto the server To access the uploaded file on the server side, req.files.avatar is used Is there a way to send this file (req.files.avatar) via an HTTP POST request (name="avatar") to a d ...

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

What is the recommended default value for a file in useState when working with React and TypeScript?

Can anyone help me with initializing a file using useState in React Typescript? const [images, setImages] = useState<File>(); const [formData, setFormData] = useState({ image: File }); I'm facing an issue where the file is sho ...