How can I perform a web request with Authentication headers from a React based custom Visual?

[ECorona]

I'm making a React Based custom visual that is inteded to work with my connector, I have a table with URLs where each URL points to an image, you can request that image but the request needs to contain an authorization header, something like this in my React component: 

        try {

            const response = await fetch(url, {

            method: "GET",

            headers: {

                "Authorization": AUTH_TOKEN

            }

        });

At this moment, the token is hardcoded

const AUTH_TOKEN = "Bearer eyJ...", my idea is to validate that I can load the images with this aproach, then I would figure it out how to generate or pass this token. 

But I'm noticing that if I pass the headers, the request is not performed (If the headers are not passed, I can get the images from public sources, for example wikipedia images, but I need to be authenticated to get the images from the desired server)

But for my specific case (where the request needs to be authenticated, I'm getting an error):

Looking in the Edge console I'm getting:
https://upload.wikimedia.org/wikipedia/commons/1/17/Amblyglyphidodon_aureus001.jpg' from origin 'null' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
component.tsx:59
GET https://upload.wikimedia.org/wikipedia/commons/1/17/Amblyglyphidodon_aureus001.jpg net::ERR_FAILED

I'm getting the same message from the URL of my server.

So, I'm assuming the request is being blocked by Power BI, is there a way to pass the headers in the request? 

[Mauro89]

Hi @ECorona,

The CORS error you're seeing isn't from Power BI blocking the request - it's the server (wikimedia in your example) rejecting the Authorization header in the preflight request. The server needs to explicitly allow the Authorization header in its CORS configuration.

For your custom visual scenario, here are some options which I havent implemented by my self but might work:

1. Backend Proxy: The most common solution is to route requests through a backend service you control. Your visual calls your backend, which then makes the authenticated request to the image server.

2. Power BI Service Account: If your images are in a service that Power BI can connect to, consider using Power BI's built-in authentication mechanisms through your connector rather than client-side fetch.

3. Server CORS Configuration: If you control the image server, ensure it returns these headers:

   Access-Control-Allow-Origin: *
   Access-Control-Allow-Headers: Authorization

Since you mentioned having a custom connector, the cleanest approach would be to fetch the images through Power BI's data pipeline (authenticated via the connector) and embed them as base64 data URIs in your dataset, rather than making client-side requests from the visual. Or if you want to use Fabric items you can also fetch the data with a pipeline which contains the HTTP request, store the images in OneLake at take them from there. But still the CORS policy is applied.

Best regards!

PS: If you find this post helpful consider leaving kudos or mark it as solution