vue3 + vite2 配置开发代理

最新推荐文章于 2025-05-10 23:02:49 发布

thinklog2018

最新推荐文章于 2025-05-10 23:02:49 发布

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： sanic 前端

本文链接：https://blog.csdn.net/thinklog2018/article/details/119813204

sanic 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了在开发环境中，前端与后端服务通过代理进行通信的方法。在Vite的配置文件vite.config.js中设置代理服务器，将/api路径指向后端服务的本地地址。在Vue组件中，使用axios库发起POST请求，通过/api标识触发代理转发，实际请求地址为去掉/api的部分。同时，文章强调了post数据需为json格式，后端需按json处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先在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数据进行处理。