英文:
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
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?
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.)
<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:
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.
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&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:973
setTimeout (async)
onFrameLoaded @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:971
(anonymous) @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&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: '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
得分: 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, 'resources')const panel = vscode.window.createWebviewPanel(
'scxml', `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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论