Amazon Connect CCP 未在 HTML iframe 中显示答案

【问题标题】：Amazon Connect CCP not displaying in HTML iframeAmazon Connect CCP 未在 HTML iframe 中显示
【发布时间】：2021-09-19 01:33:46
【问题描述】：

我创建了一个 NodeJS 应用程序，该应用程序提供 index.html 页面，index.html 包含一个带有 Amazon Connect CCP 链接的 iframe。

代码如下所示：

app.js

const PORT = process.env.PORT || 3000;

const express = require("express");
const path = require("path");

const app = express();

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "/index.html"));
});

app.listen(PORT, () => {
  console.log("Server is up on port 3000");
});

index.html

<body>
    <iframe
      src="https://<<instanceName>>.my.connect.aws/ccp-v2/chat"
      width="1000"
      height="800"
    ></iframe>
  </body>

NodeJS 应用程序部署在 Heroku 和 HTTPS 上，但是当我运行 heroku 应用程序时，它给出了以下错误：

Refused to display 'https://<<instanceName>>.awsapps.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

我还在 Approved Origins 中添加了 heroku 来源：

我在这里缺少什么？有人可以帮忙吗？

谢谢

【问题讨论】：

标签： node.js amazon-web-services iframe x-frame-options amazon-connect

【解决方案1】：

按照以下步骤操作：

使用您的 AWS 账户登录AWS Management Console。
导航到 Amazon Connect 控制台。
检查您的 Amazon Connect 实例是否位于正确的区域。选择您的实例。
See this Image
选择应用程序集成，然后选择添加源。
See this Image
输入您的域 URL。为要显式添加的特定实例嵌入 CCP 的所有域。（也适用于 localhost:3000 格式）

注意：在框架中使用嵌入式 CCP 需要与您的连接实例当前运行的位置相同的 aws-region（例如 us-east-1）。

同时从您的实例 URL 中删除“/chat”

这解决了我的问题，我希望它也能解决你的问题。

【讨论】：