React如何通过代理将前端请求转发至Node.js后端接口

配置不生效核心是3个认知和代码错误：

• 混淆了前端路由跳转和后端接口请求的逻辑：你用React Router的<Link to="/show-stocks/btc">属于前端页面导航行为，这类请求会直接交给React Router做路由匹配，根本不会触发create-react-app的代理转发规则。你只配置了/和/show-stocks两个前端路由，匹配不到/show-stocks/btc自然报路径不存在。
• 代理规则只对XHR/fetch类异步接口请求生效，不会处理浏览器地址栏跳转、Link组件触发的页面导航请求。
• axios请求路径写错：你后端接口路径是/show-stocks/btc，但代码里写的是axios.get("/btc")，就算代理正常工作，转发到后端的请求也是http://localhost:4000/btc，和你预设的接口路径完全不匹配。

按以下步骤调整代码即可：

1. 移除按钮外层错误的Link组件
   点击按钮仅需要触发接口请求拉取数据，不需要做页面跳转，直接保留按钮绑定点击事件即可，修改GetStocks组件的render部分：

   render() {
     return (
       <div>
         <h1>BTC price: {this.state.BTCprice}</h1>
         <button className={`btn--test`} onClick={this.getBTC}>
           Get price
         </button>
       </div>
     );
   }
   

2. 修正axios请求路径，和后端接口对齐
   把getBTC方法里的请求路径改成和后端一致的/show-stocks/btc，代理会自动把该请求转发到4000端口的对应接口：

   getBTC = () => {
     axios.get("/show-stocks/btc").then((response) => {
       console.log(response.data.price);
       this.setState({
         BTCprice: response.data.price,
       });
     });
   };
   

3. 校验配置并重启服务
   确认package.json里的proxy配置格式正确，推荐去掉尾部多余斜杠，写成：

   "proxy": "http://localhost:4000"
   

   修改完配置和代码后，一定要重启React开发服务，proxy配置只有服务启动时才会加载，热更新不生效。

补充说明：如果你后续确实需要/show-stocks/btc作为前端页面路由使用，直接在App.js的Routes组件里新增对应Route配置即可，不要依赖代理处理前端页面路由的匹配逻辑。

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