How can I perform a web request with Authentication headers from a React based custom Visual?
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?
