基于 Vue3、Vite 和 TypeScript 实现开发环境下解决跨域问题，实现前后端数据传递
引言
本文介绍如何在开发环境下解决 Vite 前端（端口 3000）和后端（端口 80）之间的跨域问题：
在开发环境中，前端使用的 Vite 端口与后端端口不一致，会产生跨域错误提示：
Access to XMLHttpRequest at 'http://localhost/api/some-endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方案
通过在 Vite 配置文件vite.config.ts或vite.config.js中设置代理，将前端请求转发到后端，从而绕过跨域限制。
操作步骤：
-
打开
vite.config.ts或vite.config.js，添加server.proxy属性。 -
配置代码示例：
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://localhost:80', // 后端地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '') // 移除路径中的 /api 前缀}}} })
在此配置中，所有发往 /api 的请求都会被代理到 http://localhost:80，并移除 /api 前缀（具体根据你的后端接口路径调整）。
-
修改前端请求的 URL：
将之前的请求：
axios.get('http://localhost/api/some-endpoint');改为：
axios.get('/api/some-endpoint');
Vite 会自动将 /api/some-endpoint 请求代理到 http://localhost:80/some-endpoint，实现与后端的跨域通信。
请求流程
在此配置下，axios.get('/api/some-endpoint') 实际会被代理到后端的 http://localhost:80/some-endpoint：
- 请求路径：
axios.get('/api/some-endpoint')先发送到开发服务器（例如localhost:3000）。 - 代理配置：Vite 检测到请求路径包含
/api，会将它代理到目标地址http://localhost:80。 - 路径重写：
rewrite函数移除/api前缀。 - 最终地址：请求被代理转发到
http://localhost:80/some-endpoint。
配置的意义
尽管直接请求 http://localhost:80/api/some-endpoint 是正确的后端地址，但 Vite 代理配置能避免跨域问题，简化代码，并更灵活地适配不同环境。代理配置的主要作用是：
- 解决同源策略限制：即使端口相同，浏览器也会限制跨域请求，而代理让前端和后端之间的请求看起来是同源的。
- 路径简化：设置代理后，代码只需写
/api路径，方便维护。 - 更好的环境切换：代理配置可轻松适配开发、测试、生产等不同环境。
配置效果总结：
- 避免跨域限制：请求通过代理后，看起来是发往开发服务器的，绕过跨域限制。
- 代码简洁：代理后代码路径更简洁，便于管理。
- 环境适配：代理配置使切换环境更方便，只需更改
target地址。
长路径代理的配置示例
如果你的请求路径较长，并且希望代理后的地址保留原始路径结构，例如 http://localhost:80/csdn/test/bbq/api/some-endpoint，可以使用如下配置来实现（注意，80 是默认端口，可以省略不写）：
// vite.config.ts
import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/csdn': {// 后端服务器地址target: 'http://localhost:80/csdn/',changeOrigin: true,rewrite: path => path.replace(/^\/csdn/, '')}}}
});
在具体请求中：
// 示例请求代码
const postUrl = 'http://localhost:3000/csdn/test/bbq/api/some-endpoint';
说明
这里的思路是通过本地开发服务器（前端所在服务器）反向代理到后端所在服务器。你发出的请求指向 localhost:3000，Vite 代理会将其转发至 localhost:80 的相应路径。
因此，尽管请求地址使用了 3000 端口，但代理机制会帮你将其转换为原始的后端路径结构，从而实现数据交流。