Vite代理怎么解决跨域问题

本篇内容主要讲解“Vite代理怎么解决跨域问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vite代理怎么解决跨域问题”吧!

Vite Proxy

我们这里以 Vite 的配置为例，来看一下如何给 API 请求设置代理。在 Vite 编写的项目里边，有一个 vite.config.js配置文件，里边是关于 Vite 的配置项，可以在里边配置代理。假如我们前端项目路径为

http://localhost:3000

，需要代理所有以 /api 开头的 API 请求，把它转发到

http://localhost:3001

，并且后端的 API 路径中不带 /api前缀，需要自动去掉 /api前缀，如下图所示：

下面是端口从5173代理到8080

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080', //目标url
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^/api/, ""), 
          //重写路径,替换/api
      }
    }
  }
})

注意我先配置了axios的baseurl

// 请求
const service = axios.create({
    baseURL: '/api',
    timeout: 10000
})

也就是说 我请求

request.get("/all")

，会解析成

http://127.0.0.1:5173/api/all

。

这里我请求

http://127.0.0.1:5173/api/all

这是前端的请求。

http://127.0.0.1:8080/all

这里对应后端的接口。

前端

后端