Почему localhost не работает внутри веб-представлений моего кода VS при подключении к удаленным рабочим пространствам? - PullRequest
Новая
       37

Почему localhost не работает внутри веб-представлений моего кода VS при подключении к удаленным рабочим пространствам?

0 голосов
/ 04 мая 2019

У меня есть простое расширение, которое использует API веб-кода Code для загрузки контента с сервера, который порождает мое расширение. Это делается с помощью iframe, который указывает на localhost: 

import * as vscode from 'vscode';
import * as express from 'express';

const PORT = 3000;

export function activate(context: vscode.ExtensionContext) {

    // Spawn simple server
    const app = express();
    app.get('/', (_req, res) => res.send('Hello VS Code!'));
    app.listen(PORT)

    context.subscriptions.push(
        vscode.commands.registerCommand('myExtension.startPreview', () => {
            const panel = vscode.window.createWebviewPanel('myExtension.preview', 'Preview', vscode.ViewColumn.One,
                {
                    enableScripts: true
                });

            panel.webview.html = `<!DOCTYPE html>
            <html lang="en"">
            <head>
                <meta charset="UTF-8">
                <title>Preview</title>
                <style>
                    html { width: 100%; height: 100%; min-height: 100%; display: flex; }
                    body { flex: 1; display: flex; }
                    iframe { flex: 1; border: none; background: white; }
                </style>
            </head>
            <body>
                <iframe src="http://localhost:${PORT}"></iframe>
            </body>
            </html>`
        }));
}

Это прекрасно работает, когда расширение работает локально, но когда я пытаюсь запустить мое расширение в удаленном рабочем пространстве , iframe пуст:

Empty localhost iframe when in a remote workspace

Почему это происходит и как мне это исправить?

1 Ответ

0 голосов
/ 04 мая 2019

Это ожидается при использовании localhost внутри веб-просмотра в удаленных рабочих пространствах.Основная причина заключается в том, что веб-просмотры загружаются на локальный компьютер пользователя, а ваше расширение работает на удаленном компьютере:

Localhost in the webview resolves to the local machine

Существует два возможных исправления.для этого:

Пометьте свое расширение как Расширение пользовательского интерфейса , чтобы оно всегда запускалось на локальном компьютере.

Вы можете сделать свое расширение расширением пользовательского интерфейса, если оно это делает.не нужно читать файлы из рабочей области или использовать сценарии / инструменты, которые будут установлены только с рабочей областью.Расширения пользовательского интерфейса запускаются на локальном компьютере пользователя, поэтому сервер, к которому он порождается, доступен с помощью localhost

Просто добавьте "extensionKind": "ui" к package.json вашего расширения, чтобы сделать это.

Настройте portMapping для своегоwebview

API сопоставления портов кода VS позволяет сопоставить порт локального хоста, используемый в вашем веб-обзоре, с произвольным портом на машине, на которой работает ваше расширение.Это даже работает, если ваше расширение работает удаленно.

API сопоставления портов был добавлен в VS Code 1.34.Чтобы использовать его, передайте объект portMapping при создании панели веб-просмотра: 

const panel = vscode.window.createWebviewPanel('myExtension.preview', 'Preview', vscode.ViewColumn.One,
    {
        enableScripts: true,
        // This maps localhost:3000 in the webview to the express server port on the remote host.
        portMapping: [
            { webviewPort: PORT, extensionHostPort: PORT}
        ]
    });

Если ваше веб-представление по какой-либо причине использует localhost, рекомендуется установить portMapping, чтобы он могправильно бегать куда угодно.На практике вы также должны рассмотреть возможность выбора порта, на котором работает ваш сервер.С отображением портов вам не нужно изменять html веб-просмотра для этого: 

{ webviewPort: 3000, extensionHostPort: RANDOM_PORT_SERVER_WAS_STARTED_ON }

См. Документацию VS Code для получения более подробной информации

...