博客站

在 Vite 中处理跨域问题可以通过配置开发服务器的代理功能来实现。Vite 提供了内置的代理支持，使得开发者可以轻松地解决跨域问题。以下是详细步骤和配置说明：

1. 跨域问题的背景

• 跨域请求：当浏览器尝试从一个域名请求另一个域名的资源时，如果两个域名的协议、域名或端口不同，就会触发跨域请求。
• 同源策略：浏览器出于安全考虑，默认禁止跨域请求，除非服务器明确允许。

2. Vite 的代理配置

• server.proxy 配置：Vite 提供了 server.proxy 配置选项，用于配置代理服务器。
• 代理工作原理：Vite 的开发服务器会将匹配的请求转发到目标服务器，并将响应返回给客户端，从而绕过浏览器的同源策略。

3. 配置代理

• 基本配置：在 vite.config.js 中配置 server.proxy。

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
      },
    },
  });
  

• 配置说明：
  • target：目标服务器的地址。
  • changeOrigin：是否改变请求的源（origin），通常设置为 true。
  • rewrite：重写请求路径，例如将 /api 前缀去掉。

4. 示例：完整的代理配置

• 项目结构：

  vite-proxy-project/
  ├── public/
  ├── src/
  │   ├── main.js
  │   └── App.vue
  ├── vite.config.js
  └── package.json
  

• vite.config.js：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
      },
    },
  });
  

• src/main.js：

  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
  

5. 运行开发服务器

• 启动开发服务器：

  npm run dev
  

• 访问应用：访问 http://localhost:5173，Vite 会将 /api/data 请求代理到 http://localhost:5000/data。

6. 处理多个代理路径

• 配置多个代理路径：可以在 server.proxy 中配置多个代理路径。

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
        '/auth': {
          target: 'http://localhost:6000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/auth/, ''),
        },
      },
    },
  });
  

7. 处理 WebSocket 代理

• 配置 WebSocket 代理：可以通过 ws 选项配置 WebSocket 代理。

  export default defineConfig({
    server: {
      proxy: {
        '/socket': {
          target: 'ws://localhost:7000',
          ws: true,
        },
      },
    },
  });
  

8. 处理 HTTPS 代理

• 配置 HTTPS 代理：可以通过 secure 选项配置 HTTPS 代理。

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'https://localhost:5000',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^/api/, ''),
        },
      },
    },
  });
  

总结

通过配置 Vite 的 server.proxy 选项，可以轻松地解决跨域问题。合理配置代理路径、WebSocket 代理和 HTTPS 代理，可以提升开发体验和应用性能。