VSCode实时预览下CSP阻止本地脚本加载问题求助

首先你误解了'self'在CSP中的实际含义：它指的是当前页面的完整源（协议+域名+端口），不是本地文件系统的目录。你的脚本无法运行，核心原因是VSCode实时预览的加载方式导致源和你预期的不一样：

为什么脚本不生效？ #

• 如果用的是VSCode内置的预览功能，页面通常是通过vscode-webview://这类特殊协议加载的，这时候'self'对应的是这个webview的源，而非你本地项目文件的目录，同目录的JS自然不在允许范围内。
• 如果你是直接用file://协议打开本地HTML文件，多数浏览器对file协议下的CSP'self'有严格限制——file协议没有标准的同源规则，浏览器会默认阻止同目录脚本的加载，避免本地文件的安全风险。

解决办法 #

根据你的预览方式选择对应方案：

• 用Live Server类插件（推荐）：这类插件会通过http://localhost:xxxx的http协议加载页面，此时script-src 'self'会正常生效，只要你的JS引用是正确的相对路径（比如<script src="./script.js"></script>），脚本就能正常运行。
• VSCode内置预览/File协议：开发阶段可以临时放宽CSP规则，仅用于本地调试：

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' filesystem:">
  

  注意：'unsafe-inline'和filesystem:仅适合开发环境，上线前要替换成严格的规则（比如只允许'self'和可信CDN）。
• 明确指定源：如果知道预览的具体地址（比如Live Server的http://localhost:5500），可以直接写进CSP：

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost:*">
  

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