Vite+ React+TypeScript 解决跨域问题

在Vite + React + TypeScript项目中解决跨域问题，通常可以通过配置Vite服务器来代理API请求到目标域来实现。以下是一个如何配置Vite的示例：

1. 打开项目中的vite.config.ts或vite.config.js文件。
2. 在配置文件中，使用proxy配置项来设置一个代理规则，将特定的API请求代理到目标域。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com', // 目标域
        changeOrigin: true, // 改变源到目标域
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

在上面的配置中，当请求以/api开头时，所有的请求都会被代理到http://target-domain.com。changeOrigin设置为true以确保请求头中的Host信息正确反映目标域。rewrite函数用于重写请求路径，去除/api前缀。

3. 在React组件中，当你发送API请求时，确保使用配置的代理路径。例如：

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

在这个例子中，请求/api/data将被代理到http://target-domain.com/data。

确保你的目标域允许跨域请求，否则即使配置了代理，也可能遇到安全策略问题导致请求失败。