Unable to access HTTP response headers during Ext.ajax.request callback in ExtJS 4.2.1

When making an Ext.ajax.request, I am attempting to read the headers of the response that is coming. Here is the code snippet:

Ext.Ajax.request({ url: 'http://localhost:3000/v0.1/login' ,
    method: 'POST',
    scope:this,
    jsonData: {"_username":username,"_userpwd":password},
    success: function(responseObject){
        var headers = responseObject.getAllResponseHeaders();
        console.info(headers );
        Ext.destroy(Ext.ComponentQuery.query('#loginWindow'));
        this.application.getController('SiteViewController').showView();
    },
    failure: function(responseObject){
        alert(responseObject.status);
    }
    });

However, when I check the console, only one header is printed out:

Object {content-type: "application/json; charset=utf-8"}

All the other headers are missing from the output, even though they are visible in the Chrome inspector. What could be causing this discrepancy? Any insights would be appreciated. Thanks.

javascriptajaxhttpextjshttpresponse

Answer №1

If you're making a cross-domain request, keep in mind that only the server can explicitly expose headers. Requests on the same domain will expose all headers without issue.

To ensure specific headers are exposed, add the "Access-Control-Expose-Headers" header on the server side with a list of headers separated by commas. In PHP, this would be done as follows:

header("Access-Control-Expose-Headers: Content-length, X-My-Own-Header");

These headers can then be accessed using methods like 

responseObject.getAllResponseHeaders()
or 
responseObject.getResponseHeader('content-type')
.

For more details on cross-domain requests and headers, check out this resource: http://www.html5rocks.com/en/tutorials/cors/

PS: Ace.Yin provided the correct answer, but unfortunately I lack the reputation to leave a simple comment.

Answer №2

After encountering the same issue, I stumbled upon a helpful solution at this link.

Here is a snippet regarding the headers:

Access-Control-Expose-Headers (optional) - 
The XMLHttpRequest 2 object provides a method called getResponseHeader() to retrieve specific response header values.
During a CORS request, this method can only access simple response headers. 
Simple response headers include:

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

To allow clients to access other headers, you must use the Access-Control-Expose-Headers header. This header's value should be a comma-separated list of response headers that you wish to expose to the client.

I have not yet verified it, but it seems to be on the right path :)

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

Swap out the default URL in components with the global constant

Could anyone offer some assistance with this task I have at hand: Let's imagine we have a global constant 'env' that I need to use to replace template URLs in components during build time. Each component has a default template URL, but for ...

javascriptangulartypescriptwebpackfrontend

Res.redirect is failing to redirect and displaying error message 'Connection Unavailable'

Currently, I am in the process of developing a NodeJS + ExpressJS Ecommerce Website. My focus is on enhancing the functionality of the admin panel feature. Users can navigate to /admin/products/new to access a form. When the user completes and submits this ...

javascriptnode.jsexpress

Rails encountering issues with multiple simultaneous PUT calls using AJAX

Within my Rails application, I have implemented multiple forms on a single page that are all linked to the same controller and association. Using jQuery, I have created a submit button that allows me to send all of these forms simultaneously through AJAX. ...

jqueryruby-on-railsrubyajax

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

javascriptreactjsreact-hooksuse-effect

Implementing popup alert for multiple tabs when Javascript session times out

I have implemented javascript setInterval() to monitor user idle time and display a popup alert prior to automatic logout. However, it seems to be functioning correctly only in single tabs. Here is the code snippet: localStorage.removeItem("idleTimeValue ...

javascriptphptabssetintervalsession-timeout

Is it possible to launch an Electron application by clicking a run button in the VSCode

I'm new to using VSCode and am currently working on an HTML5 app with Electron. I'm finding it cumbersome to switch between windows and enter a command each time I want to test my application. Is there a way to configure VSCode to run my Electron ...

javascripthtmlelectron

The closing brackets in PHP substr() function are causing style issues

Here's the scenario: I entered a large amount of content in a text editor (WordPress). Now, I want to display this content on my homepage using PHP queries. In order to limit the content size to 100-200 characters, I used the substr() function i ...

javascriptphphtmlwordpress

Test the file upload functionality of a Node Js application by simulating the process using Chai

My API testing involves receiving a file as input. I have successfully used the attach() function for this purpose. To cover all scenarios, I anticipate using around 20 different input files. Rather than storing these 20 files individually, my idea is to c ...

javascriptnode.jsexpresschai

Using a conditional statement in JavaScript, create a mapping between the values in an array and string

I have a dropdown list that I want to populate with options. The functionality of the onchange event is handled by the following code snippet: const handleChange = (event) => { onFilterChange(filterName, event.target.value); } The value of event.ta ...

javascriptarraysreactjsif-statementmaterial-ui

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

Tips for aggregating the values of object arrays in React props

I need help sorting three top-rated posts. Currently, the function displays three post titles along with their ratings, but they are not sorted by best rating. Can anyone assist me with this issue? {posts.slice(0, 3).sort((a, b) => ...

javascriptarraysreactjs

Delaying the form submission with jQuery ajax

I am facing an issue with my jQuery AJAX code that automatically submits my form when it is changed. The problem arises when I have a country selection in the form, and clicking on an autocomplete suggestion results in the form being submitted with the o ...

jqueryajaxformssubmitdelay

Creating a customized store locator using JSON data in WordPress for Google Maps API

I'm currently seeking a customized solution to implement a store locator using the Google Maps API within WordPress. Although there are numerous WordPress plugins available, I prefer a more tailored approach. Here are the specific requirements: ...

javascriptphpjsonwordpressgoogle-maps

I used ajax to link the Kendo grid in the date column, resulting in the Kendo grid returning /Date(1403789061723)/

While utilizing ajax, I am binding the kendo grid. In the date column, instead of returning the correct date format, the kendo grid returns /Date(1403789061723)/. All other fields are binding properly. When using normal binding, it works perfectly fine. ...

ajaxasp.net-mvckendo-ui

Utilize JavaScript to submit the FORM and initiate the 'submit' Event

Hey there! Here's the code I've been working on: HTML : <html> <body> <form enctype="multipart/form-data" method="post" name="image"> <input onchange="test();" ...

javascriptajax

Having difficulty utilizing the $.each() function to assign properties to an object

I have an object called habits that contains some values. var habits={ "Drinking":"No", "Smoking":"No" } I want to add the values from this variable into another variable in the following format: var NewHabits = new Object(); Ne ...

javascriptjquery

Is three too much for the Javascript switch statement to handle?

I'm a beginner in Javascript and am working on a project to create a fun program involving astrological signs, planets, and houses to generate a story. I have included three switch statements within one function to accomplish this. I'm encounter ...

javascript

When utilizing webpack in Angular 5, the :host selector does not get converted into a component entity

Initially, I set up Angular with webpack following the configuration in this guide, including configuring webpack sass-loader. Everything was working smoothly until I encountered an issue today: app.component.ts @Component({ selector: 'ng-app&ap ...

javascriptangularnpmwebpackpseudo-class

Challenges encountered when using setState to assign values

Just started using React and running into an issue with updating state when changes are made to a Textfield. I'm working with a functional component where the initial state is set using useState. I feel like I might be overlooking something simple... ...

javascriptreactjsobjectreact-hooksuse-state

Encountering an issue with ReactJS + Redux where the error message states: "Error in prop type: The Right-hand side of 'instanceof' cannot be called"

Currently working on a web app project in React with Redux for global state management. A puzzling issue has arisen - we're receiving warnings in the browser console. How can we resolve this? It seems related to prop types declaration, but the soluti ...

javascriptreactjsreduxreact-redux