解决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
    );
  }
相关推荐
FinAnalyzer2 小时前
如何在 InsCodeAI 上搭建并使用 Jupyter Notebook 环境?
ide·python·jupyter
SoveTingღ3 小时前
【开发环境配置】VScode里面配置cmake遇到的问题
c语言·vscode·cmake·嵌入式软件·开发环境配置
vsropy3 小时前
VScode输出中文乱码问题解决
ide·vscode·编辑器
患得患失9493 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
写点什么啦5 小时前
一键修复ipynb,Jupyter Notebook损坏文件
ide·python·jupyter
DIY全栈开发5 小时前
ESP32S3 Ubuntu vscode如何使用USB-JTAG调试
linux·vscode·ubuntu
Hi_kenyon8 小时前
Vscode的常用快捷键(摆脱鼠标计划)
ide·vscode·计算机外设
唯之为之11 小时前
如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等
vscode·ai编程
写写闲篇儿11 小时前
经典IDE之Turbo C
ide
Generalzy11 小时前
从 Print 到 Debug:用 PyCharm 掌控复杂程序的调试之道
ide·性能优化·pycharm