Vue中使用axios请求后端接口

安装axios

npm install axios

在main.js中使用axios

import axios from 'axios'
// axios.defaults.baseURL = 'https://localhost:8080/'
Vue.prototype.axios = axios

请求后端接口，例如get请求

this.axios
    .get('/api/manualcase/getModulesForTree',{
        // params: {}
      })
     .then(function (response) {
      console.log(JSON.stringify(response.data))
     });

遇到问题：

跨域问题Access to XMLHttpRequest’'from origin '’ has been blocked by CORS…Access-Control-Allow-Origin

解决办法：配置vue.config.js文件

module.exports = {
    css: {
        loaderOptions: {
            less :{
                modifyVars: {
                    'primary-color': '#1DA57A',
                    'link-color': '#1DA57A',
                    'border-radius-base': '2px',
                },
                javascriptEnabled:true
            }
        }
    },
    
    //重点解决跨域请求问题
    devServer: {
        open: true,
        port: 3000,
        proxy: {
            '/api': {
                target:'http://localhost:8080',
                ws: false,
                changeOrigin: true,
            }
        }
    },
    lintOnSave: undefined
}