Vite配置Proxy(后端API)

2023年9月27日

标签：Vue.js

解决CORS报错与配置后端API

在Vite中通过proxy配置后端API。

配置vite.config.js
proxyd（代理）的配置

前情提要：最近在做登录界面，但是在前后端数据交互的时候碰到了问题。比如我后端用的spring boot，监听的是3000端口，前端vue页面用的是5173端口。两个的URL如下：

http://localhost:5173
http://localhost:3000/user/login

很明显，两者的端口不一样，直接跑的话会导致CORS错误。之前的文章有提到过CORS是啥，这里就不再提了。

要解决这个问题，那就需要自己配置一个proxy（代理）。我的vite.config.js配置如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  server:{
    port:5173,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8120',
        changeOrigin: true,
        rewrite:(path)=>path.replace(/^\/api/,"")
      }
    }
  },
  base:'/NightBook/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

复制高亮的那段到自己的代码中就行。顺带一提重写路径的那行代码不要写错了。之前写错了导致配置的proxy不生效，一直没法解决CORS错误，到处找bug也找不出来….后面看了别人是怎么写的才发现自己漏泄了’/’….

配置完之后可以重启下vue的dev server。重启后测试下后端就能收到前端发的请求了，done。