vue3 axios Error: Network Error

源码：

<template>
  <div>
      {{info}}
  </div>
</template>
<script>
import Axios from "axios"
export default {
  data () {
    return {
      info: 'ving info1'
    }
  },
  mounted () {
    var that = this
    Axios
        .get('https://www.runoob.com/try/ajax/json_demo.json')
        .then(response => (that.info = response.data.sites))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
  }
}
</script>

　　

异常图：

 

 

原因：

出现这个问题主要是跨域原因

解决办法：

第一步：根目录新建 ‘ vue.config.js ’ 文件

 

 

 填入内容：

module.exports = {
    configureWebpack:{
        resolve:{
            // 给路径起别名
            alias:{
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views'
            }
        }
    },
    devServer:{
        proxy:{
            '/json_demo':{
                // 跨域的服务器地址
                target: 'https://www.runoob.com/try/ajax/json_demo.json',
                // 是否允许跨域
                changeOrigin: true,
                // 替换掉请求路径的/json_demo“”
                pathRewrite:{'^/json_demo': ""}
            },
        }
    }
}

　　

修改Vue页面

<template>
  <div>
      {{info}}
  </div>
</template>
<script>
import Axios from "axios"
export default {
  data () {
    return {
      info: 'ving info1'
    }
  },
  mounted () {
    var that = this
    Axios
        .get('/json_demo')
        .then(response => (that.info = response.data.sites))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
  }
}
</script>