解决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
    );
  }
相关推荐
ZeroMxy4 小时前
VSCode 修改默认主题
ide·vscode·编辑器
生莫甲鲁浪戴6 小时前
Android Studio新手开发第二十八天
android·ide·android studio
lanhuazui101 天前
【Vscode】显示多个文件 & 打开多个文件时实现标签栏多行显示
vscode·编辑器
八月正好an1 天前
visual studio安装本地帮助手册
ide·visual studio
张较瘦_1 天前
环境搭建 | [入门级]VSCode(Cursor|Trae|Qoder)搭建Java(Springboot3)企业开发环境全流程
java·ide·vscode
生莫甲鲁浪戴1 天前
Android Studio新手开发第二十一天
android·ide·android studio
生莫甲鲁浪戴1 天前
Android Studio新手开发第二十二天
android·ide·android studio
天赐细莲1 天前
(Linux) WSL 通过 VSCode 连接不执行 profile 问题(登录Shell问题)
linux·运维·vscode
暮色驶过苍茫2 天前
VSCode 配置 SSH 远程连接
ide·vscode·ssh
lichong9512 天前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++