Vue 应用中嵌入 QuickSight 仪表盘遇到的 HTTP 问题如何解决？

在 Vue 应用程序中嵌入 QuickSight 仪表盘：解决 HTTP 问题

问题概要

在使用 HTTP URL 在开发环境中将 QuickSight 仪表盘连接到 Vue 应用程序时，可能会遇到应用程序仅接受 HTTPS URL 的问题。这会导致连接问题，无法在应用程序中显示仪表盘。

解决方案

解决此问题的关键是使用开发服务器，例如 Webpack 开发服务器，它允许使用 HTTPS URL 进行本地开发。

步骤 1：安装 Webpack 开发服务器

npm install --save-dev webpack-dev-server

步骤 2：配置 Webpack

在 webpack 配置文件中，添加以下内容：

devServer: {
  https: true,
  port: 8080
}

步骤 3：运行开发服务器

npm run serve

步骤 4：在 QuickSight 中添加域

• 打开 QuickSight 控制台。
• 导航到 "分析" 页面。
• 选择要嵌入的仪表盘。
• 单击 "共享" 选项卡。
• 在 "嵌入" 部分中，单击 "添加域"。
• 输入 "https://localhost:8080" 作为域。
• 单击 "添加"。

代码示例

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <h1>QuickSight Embed</h1>
    <quicksight-embed
      :url="embedUrl"
    />
  </div>
</template>

<script>
import QuicksightEmbed from 'quicksight-embed'

export default {
  components: {
    QuicksightEmbed
  },
  data() {
    return {
      embedUrl: 'https://quicksight.aws.amazon.com/embed/dashboard/dashboards/123'
    }
  }
}
</script>

常见问题解答

• 为什么在开发环境中需要使用 HTTPS？
  QuickSight 要求所有嵌入仪表盘的应用程序使用 HTTPS URL。
• 如何知道我的应用程序是否在 HTTPS 端口上运行？
  在开发服务器控制台中查看端口号。
• 我在 QuickSight 中添加域时出错，该怎么办？
  确保你输入了正确的域，包括 HTTPS 前缀和端口号。
• 我的仪表盘仍然无法显示，还有其他解决办法吗？
  请查阅 QuickSight 文档以获取更多故障排除提示。
• 如何获取 QuickSight 仪表盘的嵌入 URL？
  在 QuickSight 控制台中，转到要嵌入的仪表盘，单击 "共享" 选项卡，然后复制 "嵌入" 部分中的 URL。