Google 的 dialogflow 集成“dialogflow messenger”（测试版）答案

【问题标题】：Google's dialogflow integration "dialogflow messenger" (beta)Google 的 dialogflow 集成“dialogflow messenger”（测试版）
【发布时间】：2020-09-28 00:37:39
【问题描述】：

我正在尝试使用名为“Dialogflow messenger”的 dialogflow 集成（这不是 microsoft messenger 的接口）。集成处于测试阶段，但我希望它能够在这个基本级别上工作。当我配置它时，如果我在对话框流控制台中单击“在此处尝试”，一切都很好。

我将 dialogflow messenger 集成复制并粘贴到笔记本电脑上的 html 页面中，但是当我打开该页面时出现 CORS 错误。

这是我粘贴的内容 - 从集成项复制我将 dialogflow messenger 集成复制并粘贴到笔记本电脑上的 html 页面中，但是当我打开该页面时出现 CORS 错误。

这是我粘贴的内容 - 从集成项复制

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  chat-icon="417a4c06-c7a0-4fb4-8b42-8d4ba853f941_x.png"
  intent="WELCOME"
  chat-title="SupaMoov"
  agent-id="xxx"
  language-code="en"
></df-messenger>

这是错误：

SupaChat%20-%20google-1.html:1 从源“null”访问“https://dialogflow.cloud.google.com/v1/integrations/messenger/webhook/xxx/sessions/dfMessenger-20080482”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在 Access-Control-Allow-Origin' 标头。

我该如何解决这个问题？

【问题讨论】：

有关信息 - 这是在 chrome 浏览器上。它适用于边缘和 IE。

标签： dialogflow-es messenger

【解决方案1】：

问题是您无法插入 html 并直接从文件系统打开它。您需要从可以使用 NodeJs、Java、php 或任何您想要的任何东西的 Web 服务器打开。然后把这个脚本放在正文的末尾。

如果它对您有用，我正在对此进行深入研究，并且我在 Youtube 中准备了三个视频，可以帮助您

为 dialoflow messenger 创建聊天机器人，
使用 NodeJs 启动 Web 服务器并个性化聊天机器人的图像
如何在您的 Web 中捕获生成与聊天机器人交互的 javascript 事件。

我已经准备了一个包含这些视频的 Youtube 列表（西班牙语，但代码很容易理解）https://www.youtube.com/playlist?list=PLnNbmcjjevxs_Uj-hAeekSbb4Yb7FZERe

我希望这会有所帮助。

【讨论】：

感谢大卫。我去看看。

【解决方案2】：

我与 Google 支持人员取得了联系。他们的回答是： “要工作，你必须在网络服务器中运行它，你可以试试 xampp”

不好！我希望从 IBM watson 转换为 dialogflow，但 watson 集成要复杂得多，所以我将留在 IBM。

【讨论】：

【解决方案3】：

我也有这个问题。

我决定将它发布在亚马逊的 S3（静态站点） 上。只需将 html 和其他文件放入 Bucket 即可。

这里的完整信息： https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

【讨论】：

【解决方案4】：

您可以将嵌入代码粘贴到 Google Site 中的嵌入代码块中，这样您就不需要网络服务器了。 Here is the embed button 点击嵌入后，点击嵌入代码并粘贴来自 Dialogflow 的代码。

【讨论】：

【解决方案5】：

您也可以使用简单的 Flask 脚本在本地主机上处理它。

from flask import Flask, request, send_from_directory,render_template
app = Flask(__name__, static_url_path='/static',template_folder='./')

@app.route("/")
def shadow():
    return render_template("shadow.html")#assuming this is the name of your html file

if __name__ == "__main__":
    app.run(host='localhost' , port=5000 , debug=True)

然后在浏览器中的 http://localhost:5000/ 打开它。

假设您已在系统中安装了 Python3 和 Flask，因此存在依赖关系。

使用 Python 3.x 安装 Flask

点安装烧瓶

或者如果你默认有 Python2，你需要这样做

pip3 安装烧瓶

当然，如果您在本地工作的话。

【讨论】：

【解决方案6】：

CORS 是一种限制来自不同来源（域）的请求的机制。 这在本地测试时通常很常见，因此当您部署时，错误就会消失。

通常，来自不同来源的请求称为跨域请求。当您的站点需要从其他服务加载数据时，跨域请求至关重要。本质上，CORS 允许服务器指定谁可以访问他们的资源以及如何访问。

-- 在 Safari 中使用 CORS 最简单、最可靠的方法是在开发菜单中禁用 CORS。

转到“首选项”>“高级”来启用开发菜单。
然后从开发菜单中选择“禁用跨域限制”。

确保在完成测试后将其切换回来。

-- 我相信 Firefox 也有一个插件可以安装。

-- 还有其他技术性更强的方法可以通过中间件解决此问题，但这是一种简单的解决方法。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：