请求一些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的代码如下：

<template>
  <div v-for="(item,i) in store.state.duanziList" :key="i">
    <p>{{item.cname}}===>{{item.title}}</p>
  </div>
</template>

<script>
import store from './store/index.js'
import axios from 'axios'


export default {
  name: 'App',

  provide:{
    store
  },

  setup(){
    let api = '/api/web201605/js/herolist.json';
    // // 方式1
    // fetch(api).then(res=>res.json()).then(result=>{
    //   store.setDzList(result.result)
    //   // console.log(result)
    // })

    // 方式2
    axios.get(api).then((result)=>{
      // console.log(result)
      store.setDzList(result.data)
    })
    return {
      store
    }
  }
}
</script>

最终效果：