Vue3 vite.config.ts 配置跨域代理，请求接口404?

Question

vite.config.ts

server: {
    // host: '0.0.0.0',
    cors: true,
    open:true,
    // 跨域配置
    proxy: {
      '/api': {
        target: 'http://192.168.0.34:8888',  // 后台接口地址
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },

调用

const test = () => {
  return axios({
    url: '/api/getAll',
    method: 'get',
  })

一直报错 404

axios的baseUrl 没有配置

求教如何才能请求通接口
另外 按照不同环境请求不同url vue3在什么地方配置

Answer 1

看接口有没有带上/api，如果接口本身就有/api则不需要重新路径，否则才重写

Answer 2

404 一般是请求成功了，但是路径错了。

检查一下正确的后端接口地址，再得看情况是否要去替换掉你请求的路径当中的 /api。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。