【徹底搞懂】vite proxy如何解決跨域問題

來了老弟發表於2023-05-16
Vite跨域

場景描述：本地起了兩個服務

  1. 前端vue專案跑在http://localhost:5173埠
  2. 後端介面服務跑在http://localhost:3000埠
    前端專案請求後端介面時，瀏覽器給出了跨域的提示，介面請求失敗。下面給出透過配置前端代理解決跨域問題的方法??

如果你是vite搭建的vue3專案，找到vite.config.ts，新增下面內容：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },
})

關鍵的點來了，你的前端發起請求的baseUrl應該是 http://localhost:5173/api

舉個例子：前端要請求後端http://localhost:3000/userlist 介面，那麼你發起的請求應該是下面的樣子：

http://localhost:5173/api/userlist

這樣前端就是從相同的host 並且相同的port發起的請求，代理透過字首"/api"匹配的你要轉發的請求，轉發到'http://localhost:3000'真正的後端服務，並且把多餘的字首給你替換掉。

關於這個問題，網路上充斥著大量的錯誤方法，一不小心就會被誤導。如果本文幫到了你，就幫忙點個贊吧，有助於讓更多的人看到。

相關文章