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 这里对应后端的接口。

前端

后端

到此，相信大家对“Vite代理怎么解决跨域问题”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！