How can I use bearer token authentication to access the report server, where the report opens on different tabs?

Question

Problem Statement

I am working on SPA, in which the user can see / view different reports in pdf, text and html, etc. Since we use authorization servers and resource servers separately, and each resource server must request user identification on the authorization server, and then the authorization server will provide a carrier token to access the resources.

now each request should have an authorization header with a carrier token to access resources.

In my case, SPA opens a new tab for access to different types of reports with a direct url (this is a requirement), so in this case I can not set the authorization header.

Is there a standard way to deal with such situations?

I tried three options for this.

#Token in url (not very good practice)

#Javascript Blob (some browsers do not support)

 var config = {
            responseType:'arraybuffer',
            headers: {
                'Authorization': $window.sessionStorage.token
            }
        };

        $http.get(url, config).then(function onSuccess(response) {

            var contentType = response.headers("content-type");
            var blob = new Blob([response.data], { type: contentType });
            var fileURL = URL.createObjectURL(blob);
            window.open(fileURL);
        });

# Set cookies (this works, but I'm looking for different solutions in which only the token carrier will be used for authorization)

Here is my report controller code for getting the report

[Authorize(User="CanView")]
    public ContentResult GetReport(string type, int id)
    {
        return new ContentResult() { Content = someByte, ContentType = "application/pdf" };
    }