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

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