如果选择使用“Hub 嵌入式 iFrame”设置来显示自定义选项卡 URL,但您的网站无法在 Hub Web 门户中正确显示,您可以对 Web 服务器进行配置,以允许您的网站在 iFrame 中正确显示。

如何允许网站显示在 Hub Web 门户上自定义选项卡的 iFrame 中

如果您的自定义选项卡无法在 Hub Web 门户上的 iFrame 中正确加载,则可能是因为您的网站配置了 HTTP 响应标头“X-Frame-Options”或“Content-Security-Policy”,这两个标头会阻止网站在 iFrame 中显示。

如果为网站配置了 HTTP 标头 X-Frame-Option,要让网站显示在 iFrame 中,请从网站配置中移除 X-Frame-Option 标头。

如果为网站配置了 HTTP 标头 Content-Security-Policy,要让网站显示在 iFrame 中,请在该标头中添加 frame-src 选项,以允许 Web 门户将您的网站嵌入到 iFrame 中。输入时应采用以下格式:

Content-Security-Policy: frame-src <https://YOUR-HUB-APP-URL>;

如何配置跨域资源共享 (Cross-Origin Resource Sharing, CORS) 以在 Hub Web 门户上的自定义选项卡中正确显示图像

如果图像无法在 Web 门户的 iFrame 中正确加载,请对您的网站进行配置,以允许 Web 门户访问图像。

图像无法显示的可能原因是浏览器会因为安全原因而限制了通过脚本发出的跨域 HTTP 请求。这意味着使用相应 API 的 Web 应用程序只能从加载该应用程序的相同来源请求资源。要使来自其他来源的图像正确显示,来自其他来源的响应必须包含正确的 CORS 标头。

CORS 是一种基于 HTTP 标头的机制,可定义浏览器和服务器进行交互以确定允许跨域请求是否安全的方式。在执行某些类型的跨域请求时,支持 CORS 的浏览器会向托管跨域资源的服务器发起额外的“预检”请求,以确定它们是否有权执行此操作。在进行预检时,浏览器会发送指示 HTTP 方法的标头和实际请求中使用的标头。

在响应中,服务器会发回一个包含 Access-Control-Allow-Origin: * 的 Access-Control-Allow-Origin 标头,这意味着可以从任何 (*) 域访问资源。为检索图像资源,系统将使用 GET HTTP 请求,并且服务器会发回一个包含 Access-Control-Allow-Method: GETAccess-Control-Allow-Method 标头,这意味着可以通过 GET HTTP 请求访问该资源。

要在 Web 门户中正确显示图像,请在网站上定义以下 CORS 预检请求标头。

Access-Control-Allow-Origin: <YOUR-HUB-APP-URL>
Access-Control-Allow-Method: GET

有关配置 CORS 的更多信息,请参阅跨域资源共享网站。