Angular 2 JSONP request lacking Authorization header

Question

Angular 2 JSONP request lacking Authorization header

I am trying to make a JSONP call and it is necessary for me to include the bearer token in the authorization header. However, even after adding the headers to my code, the authorization header does not appear in the request (checked this with Fiddler). The code uses Angular 2 and TypeScript. Here is the code snippet -

    let headers = new Headers({ 'Authorization': 'Bearer ' + token  });
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    this.url = "http://api.azurewebsites.net/api/search/" + params;

    return this.jsonp.request(this.url, options)  
        .map(this.extractData)
        .catch(this.handleErrorObservable);

Can anyone point out what might be missing in this code?.

javascript angular typescript cors jsonp

Answer 1

Answer №1

When utilizing JSONP, it is not possible to enforce authorization using an Authorization header. Instead, unless another method of authorization is configured, the endpoint from which you are returning the JSONP must be able to respond to requests from any source without requiring an Authorization header.

The reason why adding the Authorization header to the request is not feasible is because with JSONP, no request headers can be added at all. This is because JSONP functions by inserting a script element into the document and setting the request URL as the value of the src attribute for that script element.

Therefore, it is impossible to include request headers in the browser's request to fetch the URL for the script element—just like how request headers cannot be added for any other script element.

If you wish to enforce authorization utilizing an Authorization header, you must make the request using a standard method such as XHR or the Fetch API, or in Angular, a typical $http.get(…).

In this scenario, the API endpoint needs to have full CORS support, including backing for the CORS preflight OPTIONS request that the browser will automatically initiate due to the existence of the Authorization request header in the request.

Answer 2

When utilizing JSONP, it is not possible to enforce authorization using an Authorization header. Instead, unless another method of authorization is configured, the endpoint from which you are returning the JSONP must be able to respond to requests from any source without requiring an Authorization header.

The reason why adding the Authorization header to the request is not feasible is because with JSONP, no request headers can be added at all. This is because JSONP functions by inserting a script element into the document and setting the request URL as the value of the src attribute for that script element.

Therefore, it is impossible to include request headers in the browser's request to fetch the URL for the script element—just like how request headers cannot be added for any other script element.

If you wish to enforce authorization utilizing an Authorization header, you must make the request using a standard method such as XHR or the Fetch API, or in Angular, a typical $http.get(…).

In this scenario, the API endpoint needs to have full CORS support, including backing for the CORS preflight OPTIONS request that the browser will automatically initiate due to the existence of the Authorization request header in the request.

Angular 2 JSONP request lacking Authorization header

Answer №1

Similar questions

What is the process for incorporating Transformer instances into the buildVideoUrl() function using cloudinary-build-url?

Can you point me to the location of the icon within this bootstrap template?

What is the best way to establish a restriction on the number of items obtained from an RSS

Open the overflow div within a table data cell

Adding a scss file to the library build using Angular CLI

Utilizing an alphabet array to find the closest letter for navigation in a ReactJS application

What is the best way to show underlines in a JavaScript string?

The absence of an 'Access-Control-Allow-Origin' header was detected when attempting to access a .NET web api from a React application

Attempting to grasp the intricacies of the express Router functionality

Troubleshooting in Firebase and Typescript: Trouble with ID property and withConverter when creating a new Document without an ID property

Search for text within the nearest <p> tag using HTML and jQuery

What could be the reason for the crash caused by ngModel?

I have a Key in my component, but it is still searching for a unique key

What is the most effective method for invoking an inherited method (via 'props') in ReactJS?

Enhance VSCode Intellisense feature to unwrap TypeScript types

Can AJAX function properly when the server-side code is hosted on a separate domain?

Managing the verification of data existence in the ExpressJS service layer or controller

An instance of an abstract class in DI, using Angular version 5

React and Express are two powerful technologies that work seamlessly

"Comparing the similarity and accessibility of using the same browser session with a Firefox or Chrome