tauri加载本地资源展示到前端页面报错because it appears in neither the directive nor the default-src direc

563 阅读1分钟

Refused to load asset://localhost/%2FUsers%2Fsong%2FLibrary%2FCaches%2Fdefault.png because it does not appear in the img-src directive of the Content Security Policy.

Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' appears in neither the style-src directive nor the default-src directive of the Content Security Policy.

Refused to load data:font/woff2;base64,d09GMg.......... because it appears in neither the font-src directive nor the default-src directive of the Content Security Policy. 

这个错误是因为你的 Tauri 应用的 内容安全策略(Content Security Policy, CSP)限制了从 asset://localhost 加载本地资源,尤其是图片文件。要解决这个问题,你需要在 Tauri 的配置文件中更新 CSP,允许加载本地文件。

步骤:

1. 更新 tauri.conf.json 文件

你需要在 tauri.conf.json 文件中修改 security 部分,允许从 asset://localhost 加载图片。可以通过以下方式修改 CSP 设置:

        "security": {
            "csp": "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' asset://localhost data:; font-src 'self' asset://localhost data:; asset: https://asset.localhost"
        },

解释:

  • default-src 'self':允许加载自身资源。
  • img-src 'self' asset://localhost data::允许从自身、asset://localhostdata: 源加载图片。这是关键的一部分,解决你无法加载本地图片的问题。
  • script-src 'self' 'unsafe-inline' 'unsafe-eval':允许执行内联脚本和 eval。如果你的应用需要在开发过程中允许这种操作,也可以添加。
  • font-src 'self' asset://localhost data::允许从当前应用、asset://localhostdata: URI 加载字体文件。这里的 data: 允许通过 Base64 嵌入字体文件。