axios和vite在本地开发环境配置代理的两种方式，五分钟学会

冷不防 2023-10-16 15:53 5阅读 0赞

如果你使用vue或者react开发，就得使用axios吧，然后为了解决跨域问题，就得使用vite配置吧，那怎么协调配置它们两个才能正常工作呢？

正常的流程：配置axios的baseURL，然后配置vite的proxy

## 第一种方式：路径不用重写 ##

配置axios的baseURL：

//1、利用axios对象的方法create,去创建一个axios实例
    const requests = axios.create({
        //配置对象
        //基础路径，requests发出的请求在端口号后面会跟改baseURl
        baseURL: `${window.location.origin}`,
        //代表请求超时的时间5s
        timeout: 5000,
    })

然后再配置vite的proxy：在vite.config.js中配置

server: {
            host: '0.0.0.0',
            proxy: {
                '/team': {
                    target: 'http://dev*******.com:8087',
                    ws: false,
                    changeOrigin: true,
                },
                '/game': {
                  target: 'http://dev*********com:8087',
                  ws: false,
                  changeOrigin: true,
              },
            },
        },

如果你想将路径重写也是可以的，加上：

rewrite: (path) => path.replace(/^\/api/, ''),

## 第二种方式：路径重写 ##

需要配置axios的baseURL为：![a400da20faa0474ea0ff1c3dfdfb2672.png][]

然后将hado的路径重写：![6a579e2ad9e249d0b9889db1e2823c1e.png][]

以上两种方式都是可以的：![173478bd59cf4c4e823d431d75da2214.png][]

[a400da20faa0474ea0ff1c3dfdfb2672.png]: https://img-blog.csdnimg.cn/a400da20faa0474ea0ff1c3dfdfb2672.png
[6a579e2ad9e249d0b9889db1e2823c1e.png]: https://img-blog.csdnimg.cn/6a579e2ad9e249d0b9889db1e2823c1e.png
[173478bd59cf4c4e823d431d75da2214.png]: https://img-blog.csdnimg.cn/173478bd59cf4c4e823d431d75da2214.png