React前端跨域 反向代理 怎么做

在React前端项目中遇到跨域问题时，通常通过服务器端的反向代理（Reverse Proxy）技术来解决。反向代理是一种网络架构模式，它允许客户端请求直接发送到目标服务，而不是直接访问原始服务器。以下是设置React应用反向代理的基本步骤：

1. **安装依赖**：如果你使用的是Node.js和Express作为后端服务器，首先需要安装`express`和`http-proxy-middleware`库来处理代理。

npm install express http-proxy-middleware

2. **配置Express**: 在你的服务器入口文件（如`server.js`或`api.js`）中，添加反向代理中间件。例如：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 使用通配符(*)匹配所有路径
app.use(
  '/api', // 指定代理前缀
  createProxyMiddleware({
    target: 'https://api.example.com', // 目标API地址
    changeOrigin: true, // 允许跨源请求
    pathRewrite: { '^/api': '' } // 重写路径，去掉'/api'
  })
);

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. **前端更新**：在React组件里，你可以继续像平常那样向`/api`路径发送GET、POST等请求，浏览器会自动通过代理转发到指定的目标API。

4. **测试验证**：重启你的服务器，然后在React应用的开发者工具 Network 面板检查请求，应该能看到它们都经过了代理。