React配置package.json代理不生效 Axios请求未转发至后端API

问题根源 #

• package.json中proxy配置写法错误：Create React App内置的简易代理仅支持配置后端根域名，不能携带/api这类路径后缀，你当前写的"proxy": "http://localhost:8000/api"属于非法格式，会直接导致代理规则不加载。
• 请求路径不规范：你写的"posts/timeline"是不带开头斜杠的相对路径，会基于当前前端页面路由拼接，且没有匹配后端接口的/api前缀，无法命中代理规则。
• 大概率存在修改配置后未重启开发服务的问题：proxy配置修改后不会触发热更新，必须重启react-scripts start进程才能生效。

修复方案 #

方案1：使用内置简易代理（单后端场景推荐，无额外依赖） #

1. 修改package.json中的proxy字段，去掉路径后缀，只保留后端服务根地址：

   "proxy": "http://localhost:8000"
   

2. 修正Axios请求路径，开头加/标识从站点根路径发起请求，同时补全接口的/api前缀：

   useEffect(() => {
     const fetchPost = async () => {
       const response = await axios.get("/api/posts/timeline");
     };
     fetchPost();
   }, []);
   

3. 停掉当前运行的React开发服务，重新执行npm start启动，配置才会生效。

注意：浏览器网络面板中显示请求地址为http://localhost:3000/xxx是正常现象。代理是webpack-dev-server在服务端完成的转发，浏览器侧无感知，只要接口返回的是后端预期数据就代表代理正常工作。

方案2：自定义多规则代理（多后端/需要路径重写场景使用） #

如果需要配置多个代理规则，或者需要做路径重写，就用官方支持的自定义代理配置方式：

1. 先删除package.json里的proxy字段，避免规则冲突。
2. 在项目src目录下新建setupProxy.js文件（文件名和存放位置固定，不可修改，react-scripts会自动识别加载），写入以下配置：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     app.use(
       '/api',
       createProxyMiddleware({
         target: 'http://localhost:8000',
         changeOrigin: true,
         // 如果你的后端接口路径本身没有/api前缀，就打开下面的配置，代理会自动把请求路径里的/api去掉再转发
         // pathRewrite: {
         //   '^/api': ''
         // }
       })
     );
   };
   

3. 重启开发服务即可生效，请求路径和方案1保持一致，统一写/api/xxx格式即可。

额外排查点 #

• 如果给Axios配置了全局baseURL，要确保baseURL是/开头的相对路径，不能写http://localhost:3000这类带域名的绝对地址，否则请求会直接绕过代理。
• 确保后端服务http://localhost:8000正常启动，没有端口冲突。

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