vue用axios解决跨域问题遇到：Cannot read property ‘get‘ of undefined！

最新推荐文章于 2025-06-24 16:11:37 发布

lreedom

最新推荐文章于 2025-06-24 16:11:37 发布

阅读量6.1k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lreedom/article/details/118937106

博客作者最初在Vue项目中遇到axios导入问题，错误地采用了网上的错误解决方案。经过搜索，找到了正确的引入方式，即通过将axios挂载到Vue原型上实现。正确的代码片段为：import axios from 'axios'; Vue.prototype.$axios = axios。

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

一开始我是忘记引入axios了，就在网上搜了一下,搜到的答案如下（是错误的，是错误的，是错误的！！）

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

引入之后还是报错，就又去搜了一下怎么解决的问题
后来发现正确的写法是这样的

import axios from 'axios'
Vue.prototype.$axios = axios

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lreedom

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Nuxt - asyncData / fetch 请求数据控制台报错 Cannot read properties of undefined (reading ‘data‘) 也可能报其他未定义

资深程序员

07-08

4177

今天初次配置并使用asyncData/fetch请求异步数据时，发现控制台报了一个错误（如题），当时一看懵了，这哪有什么`data`不存在啊，于是将矛头指向了该页面组件的`data`与模板，发现并首先，您必须确保请求路径及跨域等配置正常，并且能正常在钩子中请求。因为请求在服务端完成请求！！！，其环境并没有window/document等对象，当遇到这些“无法识别”的对象时，就会抛出这个错误（如题）。所以您的请求配置那块，如果用到了相关对象或语法，请使用环境变量判断一下。

Vue中常见问题汇总及解决方案（一）

小刘哥的博客

07-30

416

确保你正确地引入和使用了所有需要的变量和函数。

4 条评论您还未登录，请先登录后发表或查看评论

VUE3 全局使用aixos，解决Cannot read property ‘get‘ of undefined的问题

aj951225的博客

04-08

8207

原因：axios 不能像其他组件一样通过 Vue.use() 直接被引用一、安装 npm install axios --save 二、在main.js插入import axios from ‘axios’ import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios =

当 vue3 全局挂载 axios 遇到 Cannot read property ‘get‘ of undefined

11-12

5074

第一步：先安装axios yarn add axios / npm install axios ##main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import print from 'vue3-pri.

高德地图遇到Cannot read properties of undefined (reading ‘getOptions‘)报错的处理方式

最新发布

u010822903的博客

06-24

254

2.在父组件加入map子组件的时候，我做了一个loading的结果，就是对地图给了一个缓冲的时间，其实这个后来验证加不加都行，但是我为了不报错，还是加上了。js加入防抖机制，就是让他不要那么频繁的出发搜索这个动作，不然输入一个字就要搜索一次，这样对免费的高德用户非常不友好，会报错。这样刚进来会显示一个地图正在加载中，避免测试人员一上来在地图刚出来的时候就疯狂点点点，造成报错。纠结了很久，终于在屡次试错中找到了合适的解决方法，目前已经不报错了。其中搜索是即时的，这就遇到一个问题，经常会报错。

学习记录368@axios 会报错“Uncaught TypeError: Cannot read property ‘get‘ of undefined”

教练我想学编程

12-17

1108

转载亲测有效详细】VUE中使用axios (Error in mounted hook: “TypeError: Cannot read property ‘XXX’ of undefined” 解决)

vue Cannot read property 'get' of undefined

Irene1991的博客

01-02

3761

vue Cannot read property 'get' of undefined 除了忘记引入vue-resource 还可能是this的指向性发生了改变 handleDel:function(id){ let that = this; parent.layer.confirm('确认删除？', { btn: ['确认','取消'], ...

Cannot read property 'get' of undefined in Vue

wangshuai33的博客

11-23

1万+

我使用的是Vue框架，渲染用的是axios。在已经安装axios包和已经写好axios.js文件的前提下使用axios时报Cannot read property 'get' of undefined"错误，后来发现是因为没有在nuxt.config.js的modules中引入axios，如图引入后不会在报错。 ...

vue3和axios打起来报错uncaught typeerror: cannot read property ‘use‘ of undefined at...的详细解决方案

weixin_53156322的博客

03-11

3145

本文实乃匠心之作，全程干货，希望能帮到大家。在做springboot整合vue的前后端分离项目时遇到此问题。搜了一下，别人是这样说的：根本原因是引入的axios库是使用vue2.0开发的一套组件库，而我们当前的项目为vue3，所有存在兼容性的问题。网上的解决方案也都试了一遍，问了前端的小伙伴他也不知道，但是它建议我用vue2再来，我不服，没人踩这坑，我拼了半条命也要给他填了。首先，如果你是简单的项目，axios调用也只有一个弹窗测试，那么你可以这样做。注释掉就可以了，你就会发现可以用。

前端开发②（vue 和 Axios）

m0_53698336的博客

12-02

1448

Vue.js的基本认识 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式（核心 + 扩展）框架。 Vue 只关注视图层，采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。 MVVM MVVM（Model-View-ViewModel）是一种软件架构设计模式。把Model和View关联起来的就是ViewModel。Vie

Vue保姆级项目教程：十万字零基础开发信贷管理系统！

weixin_55355282的博客

03-09

1320

本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。

axios：TypeError: Cannot read properties of undefined

qq_38432089的博客

03-31

4747

1、背景从api获取数据，发现无法解析该json对象中的属性值。以下是json数据的部分内容： {“content”: { “[{“id” : 1 ,\n “title” : “第一篇博客” ,\n “content” : “这是一篇美食博客，广州早茶的红米肠是我最喜欢的美食之一”,\n “type” : “food”\n}]”}} 2、解决（1）打印数据类型，发现是string （2）转为object this.axios.get('这里是一个api').then(res=>{ /

Vue报错（Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘get‘)）

热门推荐

weixin_56122911的博客

03-30

4万+

vue的常见报错 1：报错信息如下：原因是因为axios没有成功的引入，导致的。 2：错误的引入如下 3：正确的引入如下

请求get接口时：Cannot read properties of undefined (reading ‘get‘)

weixin_73330221的博客

10-19

1362

是否与我以上情况一样，现在跟我一起把这个问题解决吧！1.先检查main.js页面的引用。

axios报错 xhr.js:83 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘to

ourring的博客

07-05

856

大大

在Vue中使用echarts/axios，解决“TypeError: Cannot read property ‘....‘ of undefined”报错

weixin_59191887的博客

11-20

1611

console.log（this.$echarts） console.log（this.$axios）你会发现，打印出来是undefined,为什么呢？去看看 main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import * as echarts from 'echarts' import "../

Vue项目运行报错：Cannot read properties of undefined (reading ‘install‘)

m0_74152912的博客

05-20

1120

在做vue2项目时出现如下错误，页面空白且控制台出现如下错误报错原因：vue-router安装的版本太高，一般vue2的项目对应的版本是vue-router@3版本解决办法：在控制台输入： cnpm install --save vue-router@3.5.3 重新安装vue-router即可解决

vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading ‘getters‘)

weixin_57748417的博客

05-12

4333

vue中二次封装时引入store里数据报错的问题 Uncaught TypeError: Cannot read properties of undefined (reading 'getters')

Vue2.0 axios报错： Cannot read property 'protocol' of undefined

Pany的博客

06-14

2万+

错误代码如下：（但是项目还是可以run）Uncaught (in promise) TypeError: **Cannot read property 'protocol' of undefined**

axios访问一个接口报

04-03

<think>好的，用户在使用Axios调用接口时遇到了问题，需要帮助解决。首先，我需要分析用户提供的引用内容，看看有哪些可能的错误和解决方案。首先，引用[1]提到了Vue3和Axios的兼容性问题，报错是“uncaught typeerror: cannot read property ‘use’ of undefined”。这可能是因为Axios版本与Vue3不兼容，用户需要检查package.json中的版本，可能需要降级Axios或者升级Vue相关的依赖。这时候需要建议用户确认版本是否正确，并调整版本号后重新安装依赖。接下来，引用[2]提到了跨域问题（CORS）和415错误。跨域问题通常是因为后端没有正确配置CORS头，前端可以在开发环境中配置代理，或者让后端设置Access-Control-Allow-Origin等头信息。而415错误则是媒体类型不支持，可能因为请求头中的Content-Type不正确，比如发送JSON数据但未设置正确的Content-Type，或者后端期望的是表单数据，这时候需要使用Qs库将数据序列化。引用[3]提到了URLSearchParams未定义的问题，这可能在旧版浏览器中出现。解决方案是使用Qs库来替代，通过配置Axios的transformRequest选项，将数据转换为x-www-form-urlencoded格式。此外，还需要在请求头中设置Content-Type为application/x-www-form-urlencoded，并确保正确引入Qs库。综合这三个引用，用户可能遇到的常见问题包括版本兼容性、跨域问题、415错误以及数据格式处理错误。解决方案需要分步骤处理，首先检查版本，然后处理跨域，调整请求头和数据处理方式，必要时使用代理或Qs库。用户需要的是系统化的解决方案，可能遇到多个问题同时存在的情况，因此需要逐一排查。比如，先解决版本问题，再处理跨域，接着调整数据格式，最后处理特定错误如415。同时，需要给出具体的代码示例，帮助用户修改配置，比如如何设置代理，如何引入Qs并配置transformRequest等。另外，用户可能不太清楚如何具体操作，比如修改package.json后需要重新安装依赖，或者如何配置Vue的代理。需要详细说明每一步的操作，并确保代码示例正确无误，避免用户再次出错。同时，提醒用户注意环境差异，比如生产环境和开发环境的不同配置方式。最后，生成相关问题可以帮助用户进一步排查其他潜在问题，比如网络错误、身份验证问题或响应数据处理错误，这些可能也是用户后续会遇到的情况，提前给出问题可以引导用户自主解决更多问题。</think>### Axios调用接口报错解决方案 #### 一、版本兼容性问题当出现`Cannot read property 'use' of undefined`时，通常是由于Axios与Vue3版本冲突导致： 1. 检查`package.json`中axios版本 2. 建议使用稳定版本组合： ```json "dependencies": { "vue": "^3.2.0", "axios": "^1.3.5" } ``` 3. 执行`npm install`重新安装依赖[^1] #### 二、跨域问题（CORS）遇到`blocked by CORS policy`时，可采取以下方案： ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://your-backend-domain.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 同时要求后端设置响应头： ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET,POST,PUT,DELETE Access-Control-Allow-Headers: Content-Type ``` [^2] #### 三、415错误处理当出现`Unsupported Media Type`时： 1. 明确设置请求头： ```javascript axios.post(url, data, { headers: { 'Content-Type': 'application/json' // 或 application/x-www-form-urlencoded } }) ``` 2. 使用QS库处理表单数据： ```javascript import Qs from 'qs'; axios.post(url, Qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ``` [^3] #### 四、数据格式转换针对`URLSearchParams undefined`错误： ```javascript // 全局配置（main.js） import axios from 'axios'; import Qs from 'qs'; axios.defaults.transformRequest = [function (data) { return Qs.stringify(data); }]; ``` 需先安装QS库：`npm install qs` #### 五、完整请求示例 ```javascript axios.post('/api/login', Qs.stringify({ username: 'admin', password: '123456' }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => { console.log(response.data); }) .catch(error => { console.error('请求失败:', error); }); ```