Vue3 vite配置跨域请求

请求一些api接口可能遇到如下问题：

原因可能是该api不支持跨域请求

这里以王者荣耀的英雄介绍api（https://pvp.qq.com/web201605/js/herolist.json）为例，来解决问题

流程：

1.在项目下新建vite.config.js,如下图：

 vite.config.js：

module.exports = {
    proxy:{
        '/api':{
            target:'https://pvp.qq.com/',
            changeOrigin:true,  // 允许跨域
            rewrite:path => path.replace(/^\/api/,'')
        }
    }

}

2.重启服务 ：

此时，在浏览器的开发者工具中已经能够看到获取到api数据 ：

为了让获取的数据展示在页面上，还需如下操作： 

1.在工程名>src中新建store文件夹，并在该文件夹中新建index.js，用于存储获取的数据如下：

 index.js：

import {reactive} from "vue";

const store = {
    state:reactive({
        duanziList:[],
    }),
    setDzList(list){
      this.state.duanziList = list
    },
}

export default store;

2.修改App.vue的代码如下：

最终效果：