VUE中实现跨域访问后台方法获取JSON数据

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其他方法     }