标签：axios 跨域 VUE Vue 获取数据 JSON api response
VUE.JS是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，实现了MVVM(Model-View-ViewModel的)。
在使用VUE3中不可避免需要调用后台API获取JSON数据供前台使用，而且还需要跨域访问，如何实现呢？本文开门见山，直接给出解决方案。
也是三步曲：
第一步：首先在配置vue.config.js文件中添加如何代码
module.exports = {/*与NGINX配合增加二级目录配合使用*/publicPath: process.env.NODE_ENV === 'production'? '/bigdatav/': '/', //'./',/*与NGINX配合增加二级目录配合使用*/outputDir:'bigdatav',chainWebpack: config => {config.resolve.alias.set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))},//跨域访问配置,将以/api 开头的请求地址基础URL替换为http://192.168.1.100:8080///lintOnSave: false,devServer: {proxy: {'/api': {//设置代理服务器-测试地址target: 'http://192.168.1.100:8080/',//允许跨域change0rigin: true,ws: true,pathRewrite: {'^/api': ''}}}}}
第二步：然后在main.js中
//导入axiosimport axios from 'axios'//配置请求的根路径axios.defaults.baseURL ='/api';//开发环境和本地测试调用本地数据时请注释掉axios.defaults.baseURL = '/api';//开发环境和本地测试调用本地数据时请注释掉Vue.prototype.axios = axios;
通过这个配置，就实现了跨域访问配置,当本地项目访问以/api 开头的请求地址基础URL，实际上就会被替换为
http://192.168.1.100:8080/
第三步：在Vue组件中使用
methods: {//用async/await来发送异步请求，从服务端获取数据，等待获取数据，然后处理数据。async loadNumberData() { const { data:response} = await this.axios.get('/gridreport/xkz_getNumber.action');if (response.code!== 200) {return Message.error('获取数据失败！')}//Message.success('获取数据成功！')//console.log(response);//console.log('^^'+response.numberdata);this.titleItems=response.numberdata;},XXX其他方法}
标签：axios,跨域,VUE,Vue,获取数据,JSON,api,response 来源： https://blog.csdn.net/kaisep/article/details/115397631
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。