前端用Axios请求后端时proxy配置失效，请求仍发至3000端口如何解决？

以下是几个可行的解决步骤：

• 修正请求路径的写法
  你的请求路径api/chat缺少开头的斜杠，会被当作相对路径基于当前页面URL拼接，导致代理规则不匹配。将请求改为：

  const { data } = await axios.get(`/api/chat`, config);
  

  开头的斜杠会让路径基于域名根目录，触发代理规则转发到5000端口。

• 确认代理配置的正确性
  确保package.json中的proxy是顶级配置项，格式正确：

  {
    "name": "your-app",
    "version": "0.1.0",
    "proxy": "http://localhost:5000",
    // 其他配置...
  }
  

  注意不要将proxy嵌套在scripts或其他字段下。

• 重启前端开发服务器
  修改package.json中的代理配置后，必须重启你的前端dev server（比如npm start），新配置才会生效。

• 检查Axios全局配置
  如果之前设置过Axios的baseURL，比如：

  axios.defaults.baseURL = 'http://localhost:3000';
  

  这个配置会覆盖代理规则，导致请求直接发往3000端口。可以删除该全局配置，或者将baseURL设为'/'。

• 使用手动代理配置（备选方案）
  如果上述方法都无效，推荐用http-proxy-middleware手动配置代理（适用于Create React App 2.x及以上版本）：

  1. 安装依赖：npm install http-proxy-middleware --save-dev
  2. 在项目src目录下创建setupProxy.js文件，写入：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/api',
         createProxyMiddleware({
           target: 'http://localhost:5000',
           changeOrigin: true,
         })
       );
     };
     

  3. 重启前端开发服务器，此时所有以/api开头的请求都会被转发到5000端口。

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