最新Vue3项目(Vue3.2)Vite构建TypeScript版如何在前端处理CORS(跨域问题)解决办法之用Proxy(代理)如何配置?

最新Vue3项目(Vue3.2)Vite构建TypeScript版如何在前端处理CORS(跨域问题)解决办法之用Proxy(代理)如何配置?

一, 打开vite.config.ts配置文件,加入如下代码:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    open:true,
    proxy:{
      '/api':{
        target:'http://localhost:8000', //目标网站,服务端地址
        changeOrigin:true,
        rewrite(path){
          return path.replace(/^\/api/,'')
        }
      }
    }
  }
})

以上配置代理成功.其中"/api"为自行设置的代理路由,可自由变化.

二, 在请求路由中使用即可.

onMounted(() => {
      axios({
        method: 'post',
        // 之前路由 
        // url: 'http://127.0.0.1:8000/data/get/',

        // 现在路由
        url: 'api/data/get/',
        data: {
          name: 'xiaoming',
           age:   '10'
        },
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => console.log(res))
      
    }
)