2023年2月19日 04:56:33go评论81阅读模式

英文:

VS Code showing 401 trying to load script and CSS assets in a Webview

问题

I'm trying to load an HTML page referencing local JS and CSS files into a Webview. Details below on the code I'm using to construct the URIs (the results don't look correct, but the code I believe matches other examples online). The Webview Developer Tools show 401 errors for the assets. How can I get these loaded?

我正在尝试将引用本地JS和CSS文件的HTML页面加载到Webview中。以下是我用来构建URI的代码（结果看起来不正确，但我相信代码与在线示例相匹配）。Webview开发工具显示资源的401错误。如何加载这些资源？

I'm producing HTML with this in the <head>. (I have both logged this HTML as well as viewed the source elements through the Webview Developer tools to verify.)

我在<head>中生成了这个HTML。（我已经记录了这个HTML，也通过Webview开发工具查看了源元素以进行验证。）

<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>

The URIs are being produced by this code:

这些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');

… where extensionURI is from context.extensionUri with contents: {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor', query: '', fragment: '', …}. That path is correct.

… 其中 extensionURI 来自 context.extensionUri，其内容为：{scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor', query: '', fragment: '', …}。该 path 是正确的。

As best I can tell, that's the same effective code path as shown in this VS Code example for generating the webview URI.

据我所知，这与用于生成Webview URI的此VS Code示例中显示的代码路径相同。

The result, however, is that every CSS and JS asset shows net::ERR_ABORTED 401 in the Webview Developer Tools.

然而，结果是每个CSS和JS资源在Webview开发工具中都显示为 net::ERR_ABORTED 401。

Any thoughts as to what I'm doing wrong?

对于我到底做错了什么，有什么想法吗？

Investigation

调查

@Andrew below suggests that asWebviewUri() should be returning a URI with a scheme of vscode-resource. Modifying my webviewURI() function to output debug information:

@下面的Andrew建议asWebviewUri() 应该返回一个带有 vscode-resource 方案的URI。修改我的 webviewURI() 函数以输出调试信息：

console.log({
   file,
   fileURI:this.resourceURI(file), 
   webURI:this.panel.webview.asWebviewUri(this.resourceURI(file))
})

…shows that it is in fact generating URIs with an https schema and an authority of file+.vscode-resource.vscode-cdn.net:

… 显示它实际上生成的URI具有 https 方案和 file+.vscode-resource.vscode-cdn.net 作为权限：

{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'

英文:

Summary

Details

I'm producing HTML with this in the <head>. (I have both logged this HTML as well as viewed the source elements through the Webview Developer tools to verify.)

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

The URIs are being produced by this code:

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

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

// …

const editorCSSURI = this.webviewURI(&#39;baseeditorstyles.css&#39;);

As best I can tell, that's the same effective code path as shown in this VS Code example for generating the webview URI.

The result, however, is that every CSS and JS asset shows net::ERR_ABORTED 401 in the Webview Developer Tools.

GET https://file+.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css net::ERR_ABORTED 401
(anonymous) @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:973
setTimeout (async)
onFrameLoaded @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:971
(anonymous) @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:1002

Any thoughts as to what I'm doing wrong?

Investigation

@Andrew below suggests that asWebviewUri() should be returning a URI with a scheme of vscode-resource. Modifying my webviewURI() function to output debug information:

console.log({
   file,
   fileURI:this.resourceURI(file), 
   webURI:this.panel.webview.asWebviewUri(this.resourceURI(file))
})

…shows that it is in fact generating URIs with an https schema and an authority of file+.vscode-resource.vscode-cdn.net:

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

答案1

得分: 1

在过去，可能曾经使用 asWebviewUri() 生成了带有 vscode-resource: 方案的 URI，但这不再正确。由 this.panel.webview.cspSource 生成的CORS策略已正确与其生成的URI对齐以正常工作。

缺少的部分是，当调用 vscode.window.createWebviewPanel() 时，必须传递 localResourceRoots，列出文件可能从哪些位置加载。例如：

const resourcesDir = vscode.Uri.joinPath(context.extensionUri, 'resources');
const panel = vscode.window.createWebviewPanel(
    'scxml', `SCXML ${path.basename(doc.fileName)}`,
    vscode.ViewColumn.Beside,
    {
        enableScripts: true,
        localResourceRoots: [resourcesDir]
    }
);

事实上，我确实已经同时设置了 enableScripts 和 localResourceRoots，但由于复制/粘贴错误，我将目录设置为 'media' 而不是实际的 'resources' 目录。

英文:

While in the past it may have been that asWebviewUri() generated URIs with a vscode-resource: scheme, that is no longer true. The CORS policy generated by this.panel.webview.cspSource is properly aligned with the URIs it generates to work.

What is missing is that when vscode.window.createWebviewPanel() is called one must pass along localResourceRoots listing the location(s) where files may be loaded from. For example:

const resourcesDir = vscode.Uri.joinPath(context.extensionUri, &#39;resources&#39;)const panel = vscode.window.createWebviewPanel(
    &#39;scxml&#39;, `SCXML ${path.basename(doc.fileName)}`,
    vscode.ViewColumn.Beside,
    {
        enableScripts: true,
        localResourceRoots: [resourcesDir]
    }
);

I actually had both enableScripts and localResourceRoots set, but due to a copy/paste error I was setting the directory to 'media' instead of my actual 'resources' directory.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

VS Code 在 Webview 中尝试加载脚本和 CSS 资源时显示 401 错误。

问题

Summary

Details

Investigation

答案1

需要显示通知（v-alert通知），该通知将在所有页面上反映出来。

Switch语句和等效的if-else循环始终返回错误的值。

如何使用JavaScript检查数组中是否存在子数组

获取自定义类型数组的长度

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论