React Redux CRUD应用请求localhost:5000/user报ERR_CONNECTION_REFUSED错误

你遇到的请求指向3000而非5000的问题，是React环境变量读取、Axios默认配置或者服务启动顺序异常导致的，按以下顺序排查即可：

1. 确认JSON Server服务已正常启动 #

• 先运行json-server的启动脚本，比如你package.json里配置的npm run server（对应你自定义的脚本名），启动后终端会输出运行地址，确认显示的是http://localhost:5000而非其他端口
• 不要先启动React项目再启json-server，确保5000端口的服务先处于运行状态

2. 确认.env文件的位置和命名正确 #

• .env文件必须放在React项目的根目录，和package.json同级，不能放在src文件夹或者其他子目录下
• 文件名必须是.env，不要加多余后缀比如.env.txt，也不要漏了前面的点命名成env

3. 确认环境变量读取逻辑正确 #

• React的环境变量必须以REACT_APP_开头，你配置的REACT_APP_API符合规则，但注意修改.env文件后必须重启React开发服务器，新的环境变量才会生效，热更新不会加载.env的修改
• 你可以在发请求的代码前加一行打印确认变量是否读取成功：console.log(process.env.REACT_APP_API)，如果打印出来是undefined或者空值，就说明环境变量没读到，Axios会默认用当前页面的域名（也就是localhost:3000）作为请求前缀

4. 确认Axios请求配置正确 #

• 如果你用了Axios实例，要确认baseURL配置的是process.env.REACT_APP_API，不要硬写/user之类的相对路径，相对路径会自动拼接当前页面域名
  正确的实例配置示例：

  import axios from 'axios'
  const api = axios.create({
    baseURL: process.env.REACT_APP_API
  })
  

• 如果是直接写axios请求，不要写成axios.get('/user')，要写成axios.get(${process.env.REACT_APP_API}/xxx)，否则相对路径会自动拼接3000端口

5. 排除端口占用问题 #

• 如果5000端口被其他程序占用，json-server启动时会自动切换到其他端口，你可以在启动脚本里强制指定端口，把package.json里的json-server脚本改成json-server --watch db.json --port 5000即可

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