What could be the reason behind the absence of certain headers in the response from Angular.js?

Question

What could be the reason behind the absence of certain headers in the response from Angular.js?

Firstly, I will provide you with images of POSTMAN tests (you can find the link to the google drive containing postman.png at the end of this question)

The issue at hand is that there is a client on angular.js and a Laravel API (without access to configuration and code)

I aim to implement JWT Auth on the client. When data is sent to the API, angular.js sends the first request - OPTIONS - (you can find the image of this request in the google drive under angular-option.png)

Following the OPTIONS request is the POST request (images for POST-1.png and POST-2.png can be found in the google drive) Although the response header shows the Authorization key with my token, when I log() the request and response on the client side, this header is not present (the image showing the response on the client side can be found in the google drive under response-client.png)

Why is the Authorization header missing in this response?

Link to Google Drive

Here is the code snippet

Thank you for your assistance

javascript angularjs

Answer 1

Answer №1

Did you ensure that the interceptor was properly registered in your module configuration?

If yes, could you also update your signin method to check if it is logging the response there? Update the code from

signin: function (data, success, error) {
    $http.post(urls.BASE + '/auth/signin', data).then(function success(response, status, headers){

    })
}

to

signin: function (data, success, error) {
    $http.post(urls.BASE + '/auth/signin', data).then(function success(response)){
        console.log('Status:' + response.status);
        console.log('Response headers');
        console.dir(response.headers());
    })
}

When using .then for $http.post, the response object contains the following properties according to angular docs:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

Answer 2

Did you ensure that the interceptor was properly registered in your module configuration?

If yes, could you also update your signin method to check if it is logging the response there? Update the code from

signin: function (data, success, error) {
    $http.post(urls.BASE + '/auth/signin', data).then(function success(response, status, headers){

    })
}

to

signin: function (data, success, error) {
    $http.post(urls.BASE + '/auth/signin', data).then(function success(response)){
        console.log('Status:' + response.status);
        console.log('Response headers');
        console.dir(response.headers());
    })
}

When using .then for $http.post, the response object contains the following properties according to angular docs:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

What could be the reason behind the absence of certain headers in the response from Angular.js?

Answer №1

Similar questions

Unraveling the mysteries of interpreting the jsben.ch benchmark results

Attempting to insert a square-shaped div within a larger square-shaped div and enable it to be moved around by dragging

Struggling to interpret the array of objects retrieved from a call to UrlFetchApp.fetch in Google App Script

Ways to stop the browser from ending the connection?

Creating a dynamic form by extracting and populating form fields with information received from a JSON data

Showing both SubTotal and Total simultaneously in a JavaScript powered interface

What is the best way to consistently resize elements to the same pixel value, like "10px", using jquery-ui?

Utilizing the change() and contains() functions with an HTML <select> element in jQuery

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Failed to convert the value "hello" to an ObjectId (string type) for the _id path in the product model

Identifying user interaction with a dynamic drop-down menu using extension javascript

"When a jQuery button is clicked, retrieve the div element with a specific class

Examining AngularJS Jasmine Promises in IsolationDive into the world

The Ionic application encounters an issue with the $stateParams being

Karma - Monitoring Function Error Management

Leveraging AngularJS UI-Grid's rowTemplate feature to display the plus icon in the row header

Error encountered: Unable to locate module 'win-spawn'

Notification regarding navigating through gridview pages

Exclude child rows from row count in DataTable

Creating an endless variety of modals using HTML - The ultimate guide