求解axiso的基本使用遇到的问题

Question

源代码：

出现的问题：

介绍：一个简单的demo，可以通过点击"get请求"按钮，在控制台输出接口数据。
求解，如何解决。

Answer 1

前端vue配置跨域代理或者nginx反向代理
Vue配置如下

module.exports = {  
    ...其他配置项
    devServer: {
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        // 3.开发环境进行http的代理 
        //  ========关键部分=========
        proxy: {
               // 匹配 url 路径的开头
              '/api': {     
// 标识符号（自定义）  请求的路径只要是/api开头都会代理到下面这个target网站。    
// 例如：'/api/xxxx' 会代理到 http://localhost:8095/api/xxxx
                target: 'http:192.168.1.123:8888',     //请求的接口的基本路径
                changeOrigin: true,    //是否修改请求头中的host
                pathRewrite: { '^/api': '/' }          //标识符重写（重要！在后端接收到请求的接口路径时要把前端添加的'/api'标识符去掉，不然找不到对应的接口）
              }
            }
        },
        //  ========关键部分=========
        configureWebpack: () => {},
}

如有帮助，麻烦点个[采纳此答案]谢谢^O^