[JavaScript知识库]vue3 + vite2 配置开发代理

在开发环境中， 前端与后端服务由于在不同端口上，需要使用代理实现通信。

首先在vite.config.js 文件中指定代理服务器地址及url

server:{
    host:"0.0.0.0",
    proxy:{
      '/api':{
        target:'http://localhost/',
        changeOrigin:true,
        rewrite:(path) => path.replace(/^\/api/,'')
      }
    }
  }

?前端请求通过/api识别到不同服务接口的访问。

target写入对应的IP和端口。

rewrite 将作为识别用途的/api字符串从请求路径中去掉。

其次，在Vue的组件中，使用axios 向后端发送请求。

export default {
    name:'Login',
    setup(){
        let account = reactive({
            username:"",
            password:""
        })
        function Submit(){ 
            axios.post('http://localhost:3000/api/login',account).then(
                res=>{
                    console.log("返回的数据是：",res.data)
                },
                e=>{
                    console.log("axios返回错误信息：",e.message)
                }
            )
        }
        return{
            account,
            Submit
        }
    }    
}

在组件中的异步请求地址 'http://localhost:3000/api/login' 中包含/api ，这样代理会将带有这个关键字的请求转发到localhost的80端口，并在真正请求的URL中去掉/api，实际的请求地址为http://localhost/login 。

注意：post 提交的数据是account，是json格式的，后端在处理这个请求时需要按照json数据进行处理。