无法在 vscode 自定义编辑器中将本地主机页面加载到 iframe

如何解决无法在 vscode 自定义编辑器中将本地主机页面加载到 iframe

我在 http://localhost:550001 上运行网络服务器。然后我使用以下代码在 Visual Studio 中创建自定义编辑器：

    async resolveCustomTextEditor(document: TextDocument,webviewPanel: WebviewPanel,_token: CancellationToken): Promise<void> {
        const host = 'http://localhost:550001';
        webviewPanel.webview.options = {
            enableScripts: true,localResourceRoots: [Uri.parse(host)]
        }; 
        webviewPanel.webview.html = `<!DOCTYPE html>
            <html lang="en"">
            <head>
                <Meta charset="UTF-8">
                <title>Preview</title>
                <style>
                    html { width: 100%; height: 100%; min-height: 100%; display: flex; }
                    body { flex: 1; display: flex; }
                    iframe { flex: 1; border: none; background: white; }
                </style>
            </head>
            <body>
                <iframe src="${host}"></iframe>
            </body>
            </html>`;
    }
}

编辑器显示正确，但 iframe 从未加载。我可以看到以下标题：

* General:
Request URL: http://127.0.0.1:55001/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:55001
Referrer Policy: no-referrer-when-downgrade

* Response headers:
Connection: close
Content-Length: 334
Content-Type: text/html

* Request headers:
Accept: (removed)
Accept-Encoding: gzip,deflate,br
Accept-Language: pl
Connection: keep-alive
Host: 127.0.0.1:55001
Sec-Fetch-Dest: iframe
sec-fetch-mode: navigate
sec-fetch-site: cross-site
Upgrade-Insecure-Requests: 1
User-Agent: (removed)

在标头中，我可以看到请求成功（状态 200，以及正确的响应长度）。但是，此响应永远不会写入 iframe，也不会显示在编辑器中。开发工具永远将请求显示为“进行中”。

我也可以在我的浏览器中打开这个 URL 并且它可以工作。为什么它在自定义编辑器中不起作用？我该怎么做才能让它发挥作用？

无法在 vscode 自定义编辑器中将本地主机页面加载到 iframe

如何解决无法在 vscode 自定义编辑器中将本地主机页面加载到 iframe

相关推荐