使用 webview api 时遇到阻止 webview 导航答案

【问题标题】：Encouter prevented webview navigation when using webview api使用 webview api 时遇到阻止 webview 导航
【发布时间】：2019-05-30 14:55:48
【问题描述】：

您好，我正在使用 vscode webview api 从本地服务器显示一些网页

网页源代码的关键部分（形式）是这样的。它有一个按钮，单击时将启动一个发布请求。因此它可以更新其内容

<form method="POST" action="">
    <div class="form-group"><label for="start">Start Date:</label><input id="name" type="date" name="start" value="2019-01-01"
            class="form-control"><label for="end">End Date:</label><input id="name" type="date" name="end" value="2019-01-04"
            class="form-control"></div><button type="submit" class="btn btn-primary">generate report</button>

使用浏览器打开时效果很好。但是在 vscode 中启动它时，什么都没有显示，并且 vscode 告诉我它在使用 webview api 时阻止了 webview 导航

使用webview api的部分代码是这样的

    public async showDetailedReport(){
    const param: IRequestParam ={
        endpoint:'localhost',
        method:'GET',
        port:23333,
        path:'/report/detailReport'
    };
    try{
        const html: string = await sendRequest(param);
        const panel = vscode.window.createWebviewPanel(
            'Report',
            'Report',
            vscode.ViewColumn.One,
            {
                enableScripts:true,
            }
        );
        panel.webview.html = html;
    } catch(e){
        await vscode.window.showErrorMessage(e);
    }
}

所以我的问题是为什么会发生这种情况以及如何解决它，我的意思是发送帖子或重定向到其他网页。任何事情都会有所帮助。感激不尽。

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

从 VS Code 1.31 开始，webview 只能显示一个 html 内容页面，而不能导航到其他资源（例如使用表单发出 POST 请求）。

您仍然可以使用fetch 或类似的 API 发出请求，但标准的 POST 提交表单将不起作用。

【讨论】：