vite react配置代理

在 Vite 中配置代理可以通过在 `vite.config.js` 文件中设置 `proxy` 选项来实现。下面是一个基本的 Vite + React 的代理配置示例：

// vite.config.js
module.exports = {
  proxy: {
    // 将本地 /api/xxx 请求代理到 http://localhost:3000/api/xxx
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

在上面的示例中，我们将所有以 `/api` 开头的请求代理到 `http://localhost:3000` 地址，同时将请求路径中的 `/api` 前缀去掉。

然后在 React 组件中可以使用 `fetch` 或者其他 HTTP 请求库发送请求，例如：

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default App;

这样就可以在 React 组件中向代理地址发送请求并获取数据了。