vue项目构建后CSP报错解决办法

最新推荐文章于 2024-07-29 12:24:43 发布
最新推荐文章于 2024-07-29 12:24:43 发布
阅读量2.9k 收藏 2
点赞数 1
文章标签： vue.js javascript webpack 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44217741/article/details/107044070
版权
本文介绍了如何处理页面因Content Security Policy(CSP)导致的字体文件加载错误。问题源于Webpack默认将字体转换为base64，通过修改webpack配置，将limit设置为1，可以避免字体自动转base64，从而解决CSP报错。同时，祝所有程序员1024节日快乐。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面报错

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'self'".

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解决办法：

修改 webpack.base.conf.js 文件中关于

图片 png|jpe?g|gif|svg
字体 woff2?|eot|ttf|otf 的配置，

根本原因：
之前默认limit是1000,1000的话会把字体转成base64 ，设置limit为1 的话，就能禁止自动转成base64问题

在这里插入图片描述
这样就可以解决构建项目CSP报错了。

今天是1024，祝所有程序员节日快乐啦~

Tencent IT
关注
Vue3+Vite代码混淆指南
____Mr.Y的博客
04-18 920
构建后文件混淆：直接混淆已构建的JS文件，最简单且稳定的方式，适合大多数生产环境一步式构建混淆：一次命令同时完成构建和混淆，简化操作流程源代码混淆：针对源代码进行混淆，更复杂但灵活性高，适合有特殊安全需求的场景。
Vue进阶（三十三）Content-Security-Policy（CSP）详解_content-security-policy前端和后端
最新发布
2401_89225162的博客
12-18 1677
CSP) 是一种加固 Web 应用的安全性技术，通过在网站页面中设置 CSP Header 来限制页面中能够执行的脚本、样式、图片等资源。CSP 包括很多不同的策略，因此安全设置的具体值取决目标网站的需求和资源使用情况。一般而言，建议设置较为严格的 CSP，以避免XSSCSRF等安全问题。以上设置的 CSP 规则禁止所有来自第三方网站的资源，只允许本网站的资源加载。其中script-src只允许本网站和 example.com 的脚本加载，img-src只允许本网站和 data: URI 的图片加载，
Vue进阶（三十三）Content-Security-Policy（CSP）详解
热门推荐
IT全栈 华强工作室
09-05 1万+
跨域脚本攻击（XSS）是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。为了防止它，要采取很多编程措施（比如大多数人都知道的转义、过滤HTML）。很多人提出，能不能根本上解决问题，即浏览器自动禁止外部注入恶意脚本？这就是"内容安全策略"（，缩写CSP）的由来。CSP。
CSP代码报错踩坑（ModuleNotFoundError: No module named ‘utils.nms.gpu_nms‘）
weixin_51431157的博客
07-26 416
ModuleNotFoundError: No module named 'utils.nms.gpu_nms'
VUE CSP
weixin_34129696的博客
10-19 2193
2019独角兽企业重金招聘Python工程师标准>>> ...
第五十四章 CSP错误注释
yaoxin521123的博客
11-22 1720
本章描述了特定CSP错误的原因和解决方法。
vue-loader+webpack项目配置
m0_37840862的博客
07-29 2700
1.项目准备 安装之前请确保安装了nodejs和npm，在命令行输入node -v查看是否安装node 在vscode终端里面这是npm的镜像仓库，会提高下面下载的速度 # 配置仓库地址 npm config set registry https://registry.npm.taobao.org # 验证是否成功命令 npm config ls 当验证命令结果如下图，则表示成功了 2.初始化项目 创建空文件夹"webpackVue"，然后用vscode打开，然后打开vscode终端 # 将项目初始化成
Vite+Vue2+Composition-api+＜script setup＞+TypeScript搭配如何开发项目？
qq_43033748的博客
09-26 414
前言 Vite相信大家都用过，它是一种新型前端开发与构建工具，能够显著提升前端开发体验。我们在搭建Vite项目，选择Vue模板之后，默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3，而在使用Vue2，那么这篇文章值得你继续看下去。下面，我将带大家如何搭建一个 Vite+Vue2+Composition-api+**这里使用快捷初始化命令：** yarn init -y **安装Vite。** yarn add vite -D **初始化Vue2 我们需要安装Vue2，所以直接这样安装。**
vue 分模块打包 脚手架_关于vue-cli脚手架中webpack配置基础文件详解
weixin_30750349的博客
12-31 601
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...
Vue.js ERR_CONNECTION_REFUSED快速解决手册：网络安全专家的实用技巧
![Vue.js ERR_CONNECTION_REFUSED快速解决手册：网络安全专家的实用技巧]...参考资源链接：[解决Vue项目net:ERR_CONNECTION_REFUSED报错及Vue数组动态操作技巧](https://wenku.csdn.ne
vue报错Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed...
qq_41391095的博客
03-14 4317
electron 使用sequelize报错Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”.把html中meta标签,增加’unsafe-eval’
【Vue3复习】Vite创建项目报错解决
weixin_40874076的博客
07-29 654
使用命令创建项目时，没有按顺序执行以下提示命令。
浏览器迁移引发的CSP(内容安全策略)问题排查
athjyh的博客
06-27 1029
排错
CSP
Running Snail
12-15 379
1、认真构思 代码实现的错误很多都是因为在构思时没有考虑到个别特殊情况或者是边界条件，最后反倒会花很多时间来处理这些问题。因此在动手打代码之前，要保证思想已经成熟。当然，也可以一边敲着你已经很熟悉的模板一边思考，但是最核心的部分一定要深思熟虑，考虑到能考虑到的所有情况，尽可能不出差错。比如线段树的pushup和pushdown。既然多数时候都错在这，那么就可以放到最后来实现，争取一次性写对。 2、...
electorn+vue3项目启动后报错unsafe-eval，如何去除提醒
Mr__proto__的博客
02-22 2072
【代码】electorn+vue3项目启动后报错unsafe-eval，如何去除提醒。
跨域问题的解决（CORS、Proxy、CSP问题）
ppppsg的博客
08-07 610
在我的项目正式上线后，我修改了允许通过的域名和端口号，解决了大部分资源的跨域问题，但是由于我的博文是由MD文档解析成HTML的，其中博文的图片是单独用img标签的src使用url进行图片的获取的。
使用vue开发Chrome插件——vue无法正常使用（CSP环境导致）
Neonsekii的博客
09-03 1297
使用vue开发Chrome插件——vue无法正常使用（CSP环境导致） 问题描述： 这几天在尝试着用vue开发Chrome小程序，但是在开发的第一步就遇到了问题，在尝试用vue进行数据渲染的时候发现数据无法被渲染并且处于vue标签内的所有标签都会被禁止渲染。 前端代码： <body> <div>test outSide</div> <div id="app"> <p>{{ messag
【webpack】配置时的常见报错处理
qq_32768761的博客
05-11 3198
【webpack】配置时的常见报错处理... 【持续更新新问题及方案】
TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发
pulledup的博客
02-23 2237
TDesign Vue Next Starter 是一个基于腾讯官方TDesign，使用 Vue3、Vite、Pinia、TypeScript 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。内置多种常用的中后台页面完善的目录结构完善的代码规范配置支持暗黑模式自定义主题颜色多种空间布局内置 Mock 数据方案支持TS。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值