React配置proxy请求两个不同API（含Cloudinary）失效问题咨询

前置说明 #

CRA（Create React App）默认支持的package.json字符串格式proxy仅支持单目标代理，对象格式proxy不支持路径重写、请求头修改等高级配置，本身就无法适配Cloudinary这类外部服务的代理需求；proxy-middleware配置失效90%以上是依赖版本不匹配、路径规则写错、没重启服务导致的，按以下步骤配置即可生效。

方案1：CRA 项目（react-scripts 启动） #

步骤1：清理冲突配置 #

打开项目根目录的package.json，删除里面所有写过的proxy字段（不管是字符串格式还是对象格式，全部删掉，避免配置冲突）。

步骤2：安装正确版本的代理依赖 #

不要装低版本的http-proxy-middleware，直接装最新稳定版：

npm install http-proxy-middleware --save-dev
# 用yarn的话执行 yarn add http-proxy-middleware -D

步骤3：编写代理配置文件 #

在src目录下新建setupProxy.js文件（注意文件名不能改，必须是这个名字，CRA会自动识别加载，不需要额外在入口文件引入），配置内容参考如下：

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

module.exports = function(app) {
  // 代理本地Node后端接口：所有/api开头的请求转发到本地后端端口，比如你的后端跑在3001端口
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001', // 替换成你自己的后端服务地址
      changeOrigin: true,
    })
  );

  // 代理Cloudinary API请求
  app.use(
    '/cloudinary', // 自定义的Cloudinary请求前缀，别和其他路由重名
    createProxyMiddleware({
      target: 'https://api.cloudinary.com', // Cloudinary官方API地址
      changeOrigin: true, // 外部域名代理必填
      secure: true,
      pathRewrite: {
        '^/cloudinary': '', // 把请求路径里的/cloudinary前缀去掉，再转发给Cloudinary
      },
    })
  );
};

步骤4：前端请求写法注意 #

• 调本地后端：正常写/api/xxx即可，和之前逻辑一致
• 调Cloudinary接口：不要直接写Cloudinary的全域名，用自定义前缀，比如要请求上传接口，直接写/cloudinary/v1_1/你的Cloudinary云名/image/upload即可，代理会自动转发

关键提醒：改完setupProxy.js必须停掉dev server重新执行npm start启动，CRA不会热更新代理配置，不重启配置永远不生效。

方案2：Vite 搭建的React项目 #

如果你的项目是Vite启动的，setupProxy.js完全不会生效，直接改vite.config.js里的proxy配置即可：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 本地Node后端代理
      '/api': {
        target: 'http://localhost:3001', // 替换成你的后端地址
        changeOrigin: true,
      },
      // Cloudinary代理
      '/cloudinary': {
        target: 'https://api.cloudinary.com',
        changeOrigin: true,
        secure: true,
        rewrite: (path) => path.replace(/^\/cloudinary/, ''),
      }
    }
  }
})

请求写法和上面CRA方案一致，改完配置同样需要重启Vite开发服务。

常见失效原因排查 #

• 前端请求写了Cloudinary的完整跨域地址（比如开头带https://api.cloudinary.com），这种请求直接发往外网，根本不会走本地代理
• 自定义的代理前缀和前端路由、静态资源路径重名，导致匹配失败
• 依赖装成了1.x甚至更低版本的http-proxy-middleware，导出写法不对导致配置加载失败
• 改完代理配置没重启开发服务

内容的提问来源于stack exchange，提问作者NiMou