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?Run powerbi embeded report in electron and iframe
Hi 🙂 I'm facing a problem with a powerBi report, on url type : https://app.powerbi.com/reportEmbed?reportId=XXX&autoAuth=true&ctid=YYY I launch it in electron 29.2.0 in iframe I Have this error : And the screen is The request seems good Same problem if i use https://www.npmjs.com/package/powerbi-client-react But its ok if i use a webview intead of iframe (but webview is not recommended, and i'm facing other problems) Here the electron.js code : const { app, BrowserWindow, globalShortcut, screen, ipcMain, } = require("electron"); let mainWindow; app.commandLine.appendSwitch( "disable-features", "BlockInsecurePrivateNetworkRequests,PrivateNetworkAccessSendPreflights" ); // ALLOW PUPPETEER AND OTHERS TO CONNECT app.commandLine.appendSwitch("remote-debugging-port", "59059"); function createWindow() { mainWindow = new BrowserWindow({ icon: `${__dirname}/build/favicon.ico`, title: "Instore Solution - Digital Signage Player", width: 640, //size.width, height: 480, //size.height, transparent: false, backgroundColor: "#000000", frame: false, fullscreen: false, resizable: true, webPreferences: { autoplayPolicy: "no-user-gesture-required", nodeIntegration: true, webSecurity: false, webviewTag: true, plugins: true, allowRunningInsecureContent: true, nodeIntegrationInSubFrames: true, contextIsolation: false, }, }); let appUrlLoaded = false; function resize(screen) { const windowBounds = mainWindow.getBounds(); if ( Math.abs(windowBounds.width - screen.bounds.width) > 2 || Math.abs(windowBounds.height - screen.bounds.height) > 2 || Math.abs(windowBounds.x - screen.bounds.x) > 2 || Math.abs(windowBounds.y - screen.bounds.y) > 2 ) { console.log( "size is different", windowBounds, screen.size, screen.bounds ); mainWindow.setResizable(true); setTimeout(() => { try { mainWindow.setPosition(screen.bounds.x, screen.bounds.y); mainWindow.setSize(screen.bounds.width, screen.bounds.height); setTimeout(() => { try { mainWindow.setResizable(false); if (process.argv.indexOf("--dev") === -1) { mainWindow.loadURL( `file://${__dirname}/build/index.html?rnd=${new Date().getTime()}` ); } else { setTimeout(() => { mainWindow.webContents.openDevTools(); mainWindow.loadURL( `http://localhost:3001?rnd=${new Date().getTime()}` ); }, 3000); } } catch (ex) { console.error(ex); } }); } catch (ex) { console.error(ex); } }); } } function tryFullscreen() { try { const windowDisplay = screen.getDisplayNearestPoint({ x: mainWindow.getBounds().x, y: mainWindow.getBounds().y, }); if (windowDisplay) { resize(windowDisplay); } } catch (ex) { console.error(ex); } } setInterval(() => { tryFullscreen(); }, 5000); tryFullscreen(); globalShortcut.register("CommandOrControl+Shift+K", function () { BrowserWindow.getFocusedWindow().webContents.openDevTools(); }); mainWindow.webContents.session.webRequest.onHeadersReceived( { urls: ["*://*/*"] }, (d, c) => { if (d.responseHeaders["X-Frame-Options"]) { delete d.responseHeaders["X-Frame-Options"]; } if (d.responseHeaders["x-frame-options"]) { delete d.responseHeaders["x-frame-options"]; } if (d.responseHeaders["content-security-policy"]) { delete d.responseHeaders["content-security-policy"]; } if (d.responseHeaders["Content-Security-Policy"]) { delete d.responseHeaders["Content-Security-Policy"]; } if (d.responseHeaders["content-security-policy-report-only"]) { delete d.responseHeaders["content-security-policy-report-only"]; } if (d.responseHeaders["Content-Security-Policy-Report-Only"]) { delete d.responseHeaders["Content-Security-Policy-Report-Only"]; } c({ cancel: false, responseHeaders: d.responseHeaders }); } ); mainWindow.on("closed", function () { globalShortcut.unregisterAll(); mainWindow = null; }); } ipcMain.on("getProcessArgs", (e) => (e.returnValue = process.argv)); app.on("ready", createWindow); app.on("child-process-gone", (e, details) => { app.quit(); }); app.on("render-process-gone", (e, webContents, details) => { app.quit(); }); app.on("window-all-closed", function () { if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", function () { if (mainWindow === null) { createWindow(); } }); Electron versions : "@electron-forge/cli": "^7.3.1", "@electron-forge/maker-deb": "^7.3.1", "@electron-forge/maker-rpm": "^7.3.1", "@electron-forge/maker-squirrel": "^7.3.1", "@electron-forge/maker-zip": "^7.3.1", "electron": "^29.2.0" Hope you can help me, Sry for my english 🙂
How to pass client id, secret key for the export to pdf in embedded application - React JS
We are working on an embedded app that uses react js that embeds powerbi dashboard and rest api for the export to pdf functionality. Currently, export to pdf takes more than 1.30 minutes to download the pdf for a minimum of 4 pages. We are now passing bearer token. We are not able to get the code for react js to pass the service principle id and secret key so we can try optimizing the speed of the download.
