You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 05:23:14