路由切换时报错

最新推荐文章于 2024-03-28 11:12:13 发布
最新推荐文章于 2024-03-28 11:12:13 发布
阅读量148 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52252555/article/details/129417300
版权
文章讨论了当Vue项目运行时出现CannotGET错误和ContentSecurityPolicy导致的字体加载失败问题。原因是vue.config.js中的publicPath配置为./。解决方案是将publicPath改为/，从而修正资源路径引用。
摘要由CSDN通过智能技术生成

页面显示为cannot GET

控制台报错：Refused to load the font 'http://172.16.11.103:8080/css/fonts/Lato-Bold.ttf' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

可能导致的原因为：在vue.config.js中配置了打包路径publicPath: './'

解决办法：publicPath: '/'，把斜杠前面的点去掉就好啦

m0_52252555
关注
【vue2】vue2.0重复点击路由会报错
jieweiwujie的博客
07-04 405
vue路由重复点击报错
Nuxt - 每次路由切换后 asyncData / fetch 跨域报错（但是刷新后会好）
王佳斌
07-08 2930
啥意思呢， 并不是每次都从服务端渲染，只有当页面刷新时才从服务端渲染，而在客户端点击链接跳转时并不从服务端渲染，而是和标准 Vue SAP（单页面） 应用一样，从客户端进行渲染。既然路由跳转不从服务端渲染，那我们就直接原生跳转。 或者，将用户跳转的 标签改成 标签的方式进行跳转。通过 进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。 通过 标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，体现为视觉上的 “闪烁”。...
vue 启动报错
胖达的博客
10-14 629
because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. 只要修改config/index.js : dev: { assetsPublicPath: '/', //修改成这样 } ...
violates the following Content Security Policy directive:default-src *谷歌iconfont图标显示方块 拒绝加载字体违反安全策略
积极的小可爱~的博客
02-20 4880
项目运行没有问题，iconfont的css文件什么的导入也没有问题。 但是用谷歌iconfont 的图标都是小方块！ 打开控制台报这个错误： Refused to load the font ‘’ because it violates the following Content Security Policy directive: “default-src *”. Note that ‘fon...
VUE报错because it violates the following Content Security Policy directive
yangwq的博客
04-24 1万+
VUE启动服务后控制台报错：Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not expli...
「Jenkins」- Note that ‘frame-src‘ was not explicitly set, so ‘default-src‘ is used as a fallback. @2
k4nz
01-25 2723
问题描述 在 Jenkins 中，当访问测试报告时，页面无法正常显示（页面没有显示内容）。浏览器控制台显示如下错误消息： ... Refused to frame 'https://jenkins.example.com/' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'frame-src' was not explicitly set,.
[nginx] Refused to load the font ‘data:application/x-font-woff；‘Note that ‘font-src‘ was not explici
qubes的专栏
10-09 3085
question Nginx添加CSP响应头设置之后报错： Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,d09G…’ because it violates the following Content Security Policy directive: “default-src ‘self’”. Note that ‘font-src’ was not explicitly set, so ‘def
VUE的history模式下除了index外其他路由404报错解决办法
12-10
现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展： 问题背景： vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
vue路由切换时NavigationDuplicated报错的解决方法
xm2by的博客
01-16 1542
vue路由切换时NavigationDuplicated报错的解决方法 在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示： 原因： 在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...
vue路由跳转时取消之前的请求 cancelToken以及解决路由重复点击报错问题
EnidChann的博客
07-09 1391
// 1.请求拦截器 window._axiosPromiseArr = [] // axios中设置放置要取消的对象 axios.interceptors.request.use(config => { config.cancelToken = new axios.CancelToken(cancel => { window._axiosPromiseArr.push({ cancel }) }) return config }, error => { return Pr
“default-src ‘self‘“.Note that ‘img-src‘ was not explicitly set, so ‘default-src‘ is used as a fall
打工人的博客
02-16 2025
url=’ 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒) 无障碍相关考虑：设置了 refresh 值的页面可能有时间间隔太短的风险。name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。用户代理必须忽略此指示。如果设置了 name 属性， 元素提供的是文档级别（document-level）的元数据，应用于整个页面。此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。
A CSP(Content Security Policy) issue on Web UI
Free Labor 的专栏
03-26 1335
A Content Security Policy issue
cordova Refused to connect to xxxxx -- 白名单拒绝发送网络请求
michael的博客
02-27 7854
Refused to connect to 'http://www.xxx.com/xxx/mobeil/base/ashx' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval
发现知乎的一个Bug，并且我绕过了此Bug，沾沾自喜中...
weixin_30399871的博客
12-05 196
发现问题 在知乎点击修改头像，上传图片时发现一片空白。凭着程序员的直觉，第一反应时看下控制台是否有报错。果然发现如下： Refused to load the image 'data:image/jpeg;base64...' because it violates the following Content Security Policy directive: "default-sr...
【问题出现】because it violates the following Content Security Policy directive: “default-src ‘self‘“
weixin_44943389的博客
03-15 6428
这个错误表明您的网站正在尝试从一个不在内容安全策略（Content Security Policy，CSP）允许列表中的源进行资源预获取（prefetch）。如果您是通过后端代码（如 Node.js、PHP 等）设置 CSP 的，您需要在响应头中添加或更新 CSP。如果您是通过 Web 服务器（如 Apache 或 Nginx）设置 CSP 的，您需要在服务器配置文件中更新 CSP 设置。要解决这个问题，您需要更新您网站的内容安全策略（CSP），以允许从。在这个特定的错误中，您的网站尝试从。
接口请求出现because it violates the followingContent Security Policy directive: “default-src ‘self‘“. Note
最新发布
dujunuan的博客
03-28 4306
因为在Content Securty Policy中，没有配置对应的部分，那么会默认使用default-src指令，而defauit-src指令中没有设置我们发送请求un设置，因此拒绝访问。只要是配置了connect-src指令，则不会使用默认指令default-src。
浏览器控制台报错
smart_dream
10-25 8490
异常问题：浏览器关闭连接 Failed to load resource: net::ERR_CONNECTION_CLOSED 异常原因：项目中混用http协议和https协议 解决方案：指示 User Agent 将 HTTP 更改为 HTTPS <meta http-equiv="Content-Security-Policy" c...
内容安全策略（Content Security Policy）
热门推荐
wuhuimin521的博客
08-14 2万+
内容安全策略（Content Security Policy） 内容安全策略（Content Security Policy）是一种声明的安全机制，可以让网站运营者能够控制遵循CSP的用户代理（通常是浏览器）的行为。通过控制要启用哪些功能，以及从哪里下载内容，可以减少网站的攻击面。CSP的主要目的是防御跨站点脚本（cross-st...
because it violates the following Content Security Policy directive: “default-src ‘none‘“
黑夜心依的博客
05-25 5152
在打开页面时浏览器报如下错误： Refused to load the script 'http://xx.xx.xx.xx:xxxxx/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is
router路由切换后样式没渲染，刷新才好
06-01
这可能是因为路由切换后，你的样式表没有被重新加载。你可以尝试使用以下方法来解决这个问题： 1. 在你的路由切换逻辑中，手动触发样式表的重新加载。例如，在Vue.js中，你可以在路由切换前使用`beforeEach`钩子函数来触发样式表的重新加载： ```javascript router.beforeEach((to, from, next) => { // 重新加载样式表 Array.from(document.getElementsByTagName('link')).forEach(link => { link.href = link.href }) next() }) ``` 2. 使用webpack的`style-loader`和`css-loader`插件来自动刷新样式表。这种方法需要你在webpack的配置文件中进行配置。具体操作可以参考以下代码： ```javascript // webpack.config.js { // ... module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } } ``` 使用这种方法，当你的路由切换时，样式表会自动重新加载。 希望这些方法能够帮助你解决问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值