Superset仪表盘嵌入React应用失败,寻求问题排查帮助
Superset仪表盘嵌入React应用失败排查求助
我按照教程尝试将Superset仪表盘嵌入React应用,自认为代码无误但前端无法渲染仪表盘,错误截图显示前端无法正常加载仪表盘内容。
后端server.js代码
import express from "express" import fetch from "node-fetch" import cors from "cors" const PORT = 3001 const app = express() // Enable CORS app.use(cors()) app.listen(PORT, () => { console.log(`Server running on port ${PORT}`) }) async function fetchAccessToken() { try { const body = { username: "admin", password: "admin", provider: "db", refresh: true, } const response = await fetch( "http://localhost:8088/api/v1/security/login", { method: "POST", body: JSON.stringify(body), headers: { "Content-Type": "application/json", }, } ) const jsonResponse = await response.json() return jsonResponse?.access_token } catch (e) { console.error(error) } } async function fetchGuestToken() { const accessToken = await fetchAccessToken() try { const body = { resources: [ { type: "dashboard", id: "2962c53b-3364-4ad9-b4bd-35f0ff69e909", }, ], rls: [], user: { username: "guest", first_name: "Guest", last_name: "User", }, } const response = await fetch( "http://localhost:8088/api/v1/security/guest_token", { method: "POST", body: JSON.stringify(body), headers: { "Content-Type": "application/json", Authorization: `Bearer ${accessToken}`, }, } ) const jsonResponse = await response.json() return jsonResponse?.token } catch (error) { console.error(error) } } app.get("/guest-token", async (req, res) => { const token = await fetchGuestToken() res.json(token) })
React Home组件代码
import React from 'react' import { useEffect } from "react" import { embedDashboard } from "@superset-ui/embedded-sdk" function Home() { const getToken = async () => { const response = await fetch("/guest-token") const token = await response.json() return token } useEffect(() => { const embed = async () => { await embedDashboard({ id: "2962c53b-3364-4ad9-b4bd-35f0ff69e909", // given by the Superset embedding UI supersetDomain: "http://localhost:8088", mountPoint: document.getElementById("dashboard"), // html element in which iframe render fetchGuestToken: () => getToken(), dashboardUiConfig: { hideTitle: true, hideChartControls: true, hideTab: true, }, }) } if (document.getElementById("dashboard")) { embed() } }, []) return ( <div className="App"> <h1>How to Embed Superset Dashboard </h1> <div id="dashboard" style={{width:'100%',height:'800px'}}/> </div> ) } export default Home
我怀疑问题出在后端,但无法定位具体原因,希望得到帮助。
内容的提问来源于stack exchange,提问作者rwwa2014
相关产品推荐
相关产品推荐

