如何将package.json中定义的proxy作为axios的请求代理使用

完全可以实现和fetch一致的效果，直接写相对路径就能自动走proxy转发，按照以下步骤操作即可：

1. 修正proxy配置（你当前配置存在格式错误） #

你给出的package.json中proxy配置的端口标识写错了，需要把斜杠改为冒号：

{
  [...]
  "proxy": "http://localhost:5000",
  [...]
}

注意：proxy配置仅在开发环境生效，生产环境打包后不会生效，需要另行配置生产环境的请求前缀。修改proxy配置后必须重启React开发服务才能生效。

2. 可选全局配置（推荐） #

为了后续方便切换环境，建议统一配置Axios的基础路径，你可以在项目入口文件（如index.js）或者单独封装的Axios实例文件中添加如下代码：

import axios from 'axios';
// 开发环境baseURL留空自动走proxy转发，生产环境自动切换为实际后端地址
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '你的生产环境后端地址' : '';

3. 调用测试 #

配置完成后就可以直接使用你期望的写法发起请求：

axios.post("/login", { user: enteredUser, pw: enteredPw })
  .then((res) => { console.log(res); });

如果配置完成后依然不生效，可按以下顺序排查：

• 确认重启了React开发服务
• 确认你没有在Axios实例中单独配置过baseURL覆盖了默认设置
• 确认请求路径是纯相对路径，没有带多余的域名前缀或者./这类相对目录标识

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