Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

  • 报错信息:
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
at isURLSameOrigin (isURLSameOrigin.js?3934:57)
at dispatchXhrRequest (xhr.js?b50d:145)
at new Promise (<anonymous>)
at xhrAdapter (xhr.js?b50d:15)
at dispatchRequest (dispatchRequest.js?5270:58)
at Axios.request (Axios.js?0a06:108)
at wrap (bind.js?1d2b:9)
at Function.Vue.use (vue.runtime.esm.js?2b0e:5123)
at eval (main.js?56d7:17)
at Module../src/main.js (app.js:1134)
  • 问题原因,main.js中引用axios区别:
import axios from "axios";

Vue.use(axios);
  • 正确写法:
import axios from "axios";

Vue.prototype.axios = axios;

vue.use和vue.prototype的区别

通过调查资料了解到:

1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式

2、非vue官方库不支持new Vue()方式

3、每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加加的属性和方法

import from "vuex";		// 官方插件vuex
Vue.use(Vuex);
Vue.prototype.axios = axios;

主要是由于插件内部编码方式不同,axios不是按照vue规则设计的插件(准确地说不是专门为vue服务),建议用Vue.prototype添加到vue原型链上使用;

Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')的更多相关文章

  1. Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in

    前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...

  2. vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

    在进行跳转的时候报错 app.js:87499 Uncaught (in promise) NavigationDuplicated?{_name: "NavigationDuplicate ...

  3. vue 报错 Uncaught (in promise) error

    可尝试在then()后加上catch() ps:该图来自网络

  4. Vue. 之 报错 Uncaught (in promise)

    Vue. 之 报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可.

  5. 填坑——audio不能正常播放,控制台报错 Uncaught (in promise) DOMException

    原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...

  6. 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

  7. vue报错 Uncaught TypeError: Cannot read property of null

    有可能是点击a标签,但是a标签有click事件,未阻止默认事件导致报错,开始都看不出来是什么错误

  8. jQuery配合html2canvas 使用时 报错 Uncaught (in promise) Provided element is not within a Document

    报错代码: 这个函数运行时 function download(){ var element = $("#demo"); //jquery 获取元素 //这里将会报错 html2c ...

  9. vue报错Error in render: "TypeError: Cannot read property '0' of undefined"

    通常有两种情况: 1.在模板的html标签上使用length报错 vue 中使用 length判断的时候,有时会报错,如下: <div class="item_list" v ...

随机推荐

  1. vmware克隆Centos虚拟机网卡无法启动问题

    快速处理办法: cat /etc/sysconfig/network-scripts/ifcfg-eth0 sed -i '/UUID/d' /etc/sysconfig/network-script ...

  2. 学习openstack(八)

      一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初 ...

  3. java弹框

    Java弹窗操作 1.任务简介 本博客介绍两种Java弹窗操作的方法,第一个种是通过弹出对话框显示用户输入的信息,第二种是通过用户输入数字的不同打开不同的程序. 2.弹出对话框的操作 1)任务内容编程 ...

  4. 原生js造轮子之模仿JQ的slideDown()与slideUp()

    代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,as such ...

  5. 结合Vue.js的前端压缩图片方案

    这是一个很简单的方案.嗯,是真的. 为什么要这么做? 在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克: 低网速下上传进度缓慢,用户体 ...

  6. Spring Security的使用

    spring security使用目的:验证,授权,攻击防护. 原理:创建大量的filter和interceptor来进行请求的验证和拦截,以此来达到安全的效果. Spring Security主要包 ...

  7. 【Android Studio】Gradle统一管理版本号引用配置

    1.在根目录下的build.gradle文件下添加 ext{ .... } 中的内容 ...... // Define versions in a single place ext { // SDK ...

  8. 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息

    redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...

  9. 前端如何通过js判断浏览器的类型(忽略版本)web html css javascript

    每个页面浏览器会实例出一个window对象,在window对象下有一个属性navigator,navigator本身是一个对象,navigator对象上有一个属性userAgent里面包含了当前浏览器 ...

  10. 初识react中高阶组件

    高阶组件并不是一个组件,而是一个函数 这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...