解决 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中设置代理，将前端请求转发到后端，从而绕过跨域限制。

操作步骤：

1. 打开 vite.config.ts 或 vite.config.js，添加 server.proxy 属性。

2. 配置代码示例：

   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 前缀（具体根据你的后端接口路径调整）。

3. 修改前端请求的 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：

1. 请求路径：axios.get('/api/some-endpoint') 先发送到开发服务器（例如 localhost:3000）。
2. 代理配置：Vite 检测到请求路径包含 /api，会将它代理到目标地址 http://localhost:80。
3. 路径重写：rewrite 函数移除 /api 前缀。
4. 最终地址：请求被代理转发到 http://localhost:80/some-endpoint。

配置的意义

尽管直接请求 http://localhost:80/api/some-endpoint 是正确的后端地址，但 Vite 代理配置能避免跨域问题，简化代码，并更灵活地适配不同环境。代理配置的主要作用是：

1. 解决同源策略限制：即使端口相同，浏览器也会限制跨域请求，而代理让前端和后端之间的请求看起来是同源的。
2. 路径简化：设置代理后，代码只需写 /api 路径，方便维护。
3. 更好的环境切换：代理配置可轻松适配开发、测试、生产等不同环境。

配置效果总结：

• 避免跨域限制：请求通过代理后，看起来是发往开发服务器的，绕过跨域限制。
• 代码简洁：代理后代码路径更简洁，便于管理。
• 环境适配：代理配置使切换环境更方便，只需更改 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 端口，但代理机制会帮你将其转换为原始的后端路径结构，从而实现数据交流。

问题

目前实际开发的时候我遇到一个问题就是后端可能无法获得正确的ip地址，当然啦，这是小问题。如果你还发现什么弊端可以留言给大家分享。