Блог

Главная - Вопросы по программированию - Запрос перекрестного происхождения VSCode внутри WebView

Запрос перекрестного происхождения VSCode внутри WebView

#visual-studio-code #cors #vscode-extensions

#visual-studio-code #cors #vscode-расширения

Вопрос:

Я работаю над расширением, основанным на VSCode WebView. Расширение обеспечивает интеграцию с системой отслеживания проблем через HTTP API, например, Jira. Я хочу отобразить информацию о проблеме в WebView и создать несколько форм для внесения комментариев и изменения статуса проблемы. Я не хочу использовать передачу сообщений между расширением и WebView. Когда я пытаюсь создать HTTP-запрос к API внутри WebView, я получаю ошибку:

 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Сервер не поддерживает Access-Control-Allow-Origin для источника «null» или «localhost».

Можно ли создать HTTP-запрос из WebView на сервер, игнорируя отсутствующий заголовок Access-Control-Allow-Origin? Может быть, я могу настроить некоторую политику для панели WebView? Или создать прокси localhost внутри расширения и отправить запрос через прокси?

Пример кода

 import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    vscode.commands.registerCommand('catCoding.start', () => {
      // Create and show panel
      const panel = vscode.window.createWebviewPanel(
        'catCoding',
        'Cat Coding',
        vscode.ViewColumn.One,
        {enableScripts: true}
      );

      // And set its HTML content
      panel.webview.html = getWebviewContent();
    })
}

function getWebviewContent() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://google.com', true);
        xhr.send();
    </script>
</body>
</html>`;
}

Ответ №1:

Ответ от проблемы с Github

Для изменения этого нет поддержки vscode. Вы должны думать о webview скорее как о представлении html (таком, у которого нет сервера или источника), а не как о веб-странице

На постерах в stackoverflow могут содержаться предложения по обходным путям

Ответ №2:

Поддержка изоляции из разных источников была только что добавлена для Webview с помощью vscode-coi параметра url; см. https://github.com/microsoft/vscode/issues/137884