vue和vite怎么同时代理两个路径，以及一些坑点

最新推荐文章于 2024-08-18 23:36:23 发布

second丶S

最新推荐文章于 2024-08-18 23:36:23 发布

阅读量233

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/second223/article/details/140997417

版权

 server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          //获取数据的服务器地址设置
          target: env.VITE_SERVE,
          //需要代理跨域
          changeOrigin: true,
          //路径重写
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
        [env.VITE_APP_BASE_API1]: {
          target: env.VITE_SERVE1,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api1/, ''),
        },


      }
    }

VITE_APP_BASE_API ='/api'
VITE_APP_BASE_API1 ='/api1'
VITE_SERVE="http://sph-api.atguigu.cn"
VITE_SERVE1="http://39.98.123.211:8510"

let request = axios.create({
  //基础路径
  // @ts-ignore
  baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
  // baseURL: '',
  timeout: 5000//超时的时间的设置
});


//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
  console.log(config.url)
  if (config.url?.includes('/api1')) {
    // @ts-ignore
    config.baseURL = ''

  }
  const userStore = useUserStore();
  if (userStore.token) {
    config.headers.token = userStore.token;
  }
  //config配置对象,headers属性请求头,经常给服务器端携带公共参数
  //返回配置对象
  return config;
}, (error) => {
  return Promise.reject(error);

});

我在这边同时代理两个路径，但是不管怎么试都成功不了,然后我发现把代理两个位置换一下就成功了！！！

 server: {
      proxy: {
        [env.VITE_APP_BASE_API1]: {
          target: env.VITE_SERVE1,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api1/, ''),
        },
        [env.VITE_APP_BASE_API]: {
          //获取数据的服务器地址设置
          target: env.VITE_SERVE,
          //需要代理跨域
          changeOrigin: true,
          //路径重写
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      }
    }