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

本文介绍: Vue3项目(Vue3.2)Vi t e 构建Ty peScri p t版如何在前端处理CORS(跨域问题)解决办法之用Pro x y(代理)

最新Vue3项目(Vue3.2)Vi te构建Ty peScri p t版如何在前端处理CORS(跨域问题)解决办法之用Pro x y(代理)如何配置?

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(() =&gt; {
      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) =&gt; console.log(res))
      
    }
)