VS Code Webview加载本地JS/CSS资源出现401错误求助

问题描述 #

在VS Code Webview中加载本地JS和CSS文件时，使用asWebviewUri()生成资源URI，但Webview开发者工具显示所有资源均返回net::ERR_ABORTED 401错误。调试发现生成的URI以https://file+.vscode-resource.vscode-cdn.net/开头，而非预期的vscode-resource协议，代码逻辑与官方示例一致。

详细信息 #

HTML头部内容

<meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'self' https://*.vscode-cdn.net; script-src 'nonce-1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3'">
<link href="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css"
      rel="stylesheet">
<script nonce="1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3" type='module'
        src="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/editorglue.js"></script>

生成URI的代码

private resourceURI(file: string) {
    return vscode.Uri.joinPath(this.extensionURI, 'resources', file);
}

private webviewURI(file: string) {
    return this.panel.webview.asWebviewUri(this.resourceURI(file)).toString();
}

// …

const editorCSSURI = this.webviewURI('baseeditorstyles.css');

extensionURI来自context.extensionUri，路径已确认正确。

调试输出

{file: 'neatxml.js', fileURI: f, webURI: f}
    file: 'neatxml.js'
    fileURI: f {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
        _formatted: null
        _fsPath: null
        authority: ''
        fragment: ''
        fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
        path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
        query: ''
        scheme: 'file'
    webURI: f {scheme: 'https', authority: 'file+.vscode-resource.vscode-cdn.net', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
        _formatted: null
        _fsPath: null
        authority: 'file+.vscode-resource.vscode-cdn.net'
        fragment: ''
        fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
        path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
        query: ''
        scheme: 'https'

解决方法 #

1. 配置Webview的localResourceRoots选项 #

创建WebviewPanel时，必须显式配置localResourceRoots，将扩展内的资源目录添加到允许访问列表中。示例配置：

const panel = vscode.window.createWebviewPanel(
    'yourPanelId',
    'Panel Title',
    vscode.ViewColumn.One,
    {
        // 关键：允许访问扩展内的resources目录
        localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, 'resources')],
        enableScripts: true,
        retainContextWhenHidden: true
    }
);

未正确设置该选项时，asWebviewUri会生成CDN形式的HTTPS链接而非vscode-resource协议，导致权限验证失败。

2. 更新内容安全策略（CSP） #

当前CSP的style-src仅允许https://*.vscode-cdn.net，需添加vscode-resource:到允许列表，兼容正确的资源协议：

<meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'self' vscode-resource: https://*.vscode-cdn.net; script-src 'nonce-1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3'">

3. 兼容旧版VS Code（可选） #

若使用的VS Code版本较旧，asWebviewUri行为可能存在差异，可手动构造vscode-resource协议的URI：

private webviewURI(file: string) {
    const resourceUri = this.resourceURI(file);
    return resourceUri.with({ scheme: 'vscode-resource' }).toString();
}

注意：新版VS Code推荐使用官方asWebviewUri方法配合localResourceRoots配置，此方法仅作临时兼容。

内容的提问来源于stack exchange，提问作者Phrogz