Vue-js 内容安全策略

Question

我正在尝试将我的 vuejs 应用程序上传到 heroku，但它没有运行，所以我使用了 this 教程。我将下面的标签添加到我的 index.html 的头部

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost:5000 'unsafe-inline' 'unsafe-eval'; script-src 'self' http://localhost:5000 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">

它仍然不起作用。我在控制台中收到以下错误：

拒绝加载图像“data:image/svg+xml;base64,_IMAGE_DATA”，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，'img-src' 没有明确设置，所以 'default-src' 用作后备。

请问我该如何解决？ 我已经检查了有关堆栈溢出的其他与cordova 相关的答案，但它们似乎都不适合我。

Answer 1

让我们试试这个方法。

你在 Webpack 中使用过 url-loader 吗？

如果答案是肯定的，那么当您删除如下代码时它会起作用：

module: {
    rules: [
        {// remove the block
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
    ]
}

使用file-loader替换url-loader时不会引用base64的图片。