解决vscode扩展插件开发webview中的请求跨域问题

在webview中是无法发送跨域请求的,可以通过消息机制,在插件中发请求,然后将请求结果传递给webview

我的代码是基于vscode-webview-ui-toolkit-samples-vue来写的

webview vue组件中的代码示例

javascript 复制代码
async function initData() {
  // 向插件发送消息
  vscode.postMessage({
    command: 'getData',
    text: 'demo'
  })
}

// 监听插件消息
window.addEventListener('message', event => {
  const message = event.data; // The JSON data our extension sent

  switch (message.command) {
    case 'resultData':
      // 接收到数据
      const data = message.data
      // 然后就可以在webview中使用数据了
      break;
  }
})

onBeforeMount(() => {
  initData()
})

插件panel中的代码示例

javascript 复制代码
/**
   * Sets up an event listener to listen for messages passed from the webview context and
   * executes code based on the message that is recieved.
   *
   * @param webview A reference to the extension webview
   * @param context A reference to the extension context
   */
  private _setWebviewMessageListener(webview: Webview) {
    // 监听webview消息
    webview.onDidReceiveMessage(
      (message: any) => {
        const command = message.command;
        const text = message.text;

        switch (command) {
          case "getData":
            axios.get(`http://x.x.x.x:10200/${text}/list`).then(res => {
              // 将接口返回的数据发送给webview
              // 注意用axios发请求的化,发送数据中的data需要取res.data,而不能直接用res
              // 否则会报"TypeError: Converting circular structure to JSON"错误
              webview.postMessage({command: 'resultData', data: res.data});
            });
            return;
          // Add more switch case statements here as more webview message commands
          // are created within the webview context (i.e. inside media/main.js)
        }
      },
      undefined,
      this._disposables
    );
  }
相关推荐
小杨勇敢飞2 小时前
IDEA 2024 中创建 Maven 项目的详细步骤
java·ide·intellij-idea
许商4 小时前
【stm32】cmake构建vscode开发环境
ide·vscode·编辑器
小-黯8 小时前
VSCode+QT开发环境配置
ide·vscode·qt
xcs194058 小时前
前端 开发vscode trae idea 热键
ide·vscode·intellij-idea
没头脑的男大11 小时前
jupyter notebook继续学习
ide·学习·jupyter
Siren_dream13 小时前
CSDN Markdown 编辑器快捷键大全
编辑器
神洛华13 小时前
YDWE编辑器系列教程二:物体编辑器
编辑器·游戏策划
weixin_4231961716 小时前
使用vscode的ssh功能连接远程服务器卡在Setting up SSH Host IP: Downloading VS Code Server的解决方案
服务器·vscode·ssh
沉木渡香17 小时前
VSCode中Java开发环境配置的三个层级(Windows版)1-3
java·windows·vscode
Xiaok101819 小时前
Jupyter Notebook 两种模式:编辑模式 & 命令模式
ide·jupyter·命令模式