vue2.0--axios的跨域问题
鉴于这个问题,特地的提取了一个demo来进行截图说明。
一、根据官网的的安装流程安装vue-cli
1 2 3 4 5 6 7 | # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm run dev |
踩坑说明
1、根据官网用 npm i -g vue-cli 会报错。报错原因不明,(谁若知道的望告知)
解决办法: cnpm i -g vue-cli 换成cnpm就可以了
2、 vue init webpack my-project 安装后就出现如下。一路按enter,在询问是否安装vue-router时,我选了Y,其余都选n。最后停在了一个输入文本的区域。这里要等很久(久到你以为程序出错了还是怎样。所以要放点耐心等)
二、安装axios,并配置相应文件。这里跨域请求的接口来自豆瓣的api
安装 npm install axios --save
配置:
1、在 src/main.js 中如下声明使用
1 2 3 | import axios from 'axios'; Vue.prototype.$axios=axios; |
2、在 config/index.js 中的 的dev 添加以下代码,设置一下proxyTable
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | dev: { //加入以下 proxyTable:{ '/api': { target : 'http://api.douban.com', //设置你调用的接口域名和端口号.别忘了加http changeOrigin : true, //允许跨域 pathRewrite : { '^/api': // '/'这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替。比如我要调用'http://api.douban.com/v2/movie/top250',直接写‘/api/v2/movie/top250’即可 } } }, } |
3、在 config/dev.env.js 中设置以下代码
1 2 3 4 | module.exports = merge(prodEnv, { NODE_ENV: '"development"', //开发环境 API_HOST:"/api/" }) |
4、在 config/prod.env.js 中设置以下代码
1 2 3 4 | module.exports = { NODE_ENV: '"production"',//生产环境 API_HOST:'"http://api.douban.com"' } |
5、修改 src/components/HelloWorld.vue 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < template > < div class="hello"> < h1 >{{ msg }}</ h1 > < ul > < li v-for="item in movieArr"> < span >{{item.title}}</ span > </ li > </ ul > < button @click="sayOut">渲染</ button > </ div > </ template > < script > import axios from 'axios'; export default { name: 'hello', data () { return { msg: '调用豆瓣api', movieArr : [] } }, methods:{ sayOut () { this.$axios.get('/api/v2/movie/top250') .then((response) => { console.log(response) console.log(response.data.subjects) this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑 }) } } } </ script > |
嗯,到这,就大功告成了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)