请求返回状态码404（REDUX）：触发PASSWORD_LIST_REQUEST后无法拉取数据

你已经通过Postman验证后端接口正常，且PASSWORD_LIST_REQUEST action已触发，可排除后端路由本身的问题，问题大概率出在前端请求配置或Redux流程细节上，按以下优先级排查：

• 请求地址/跨域配置错误（最高发）
  你代码中axios直接请求/api/passwords，默认会向当前前端服务的域名+端口发送请求，比如前端跑在http://localhost:3000，请求就会发到http://localhost:3000/api/passwords，而非你后端监听的5000端口，Postman因为直接请求后端端口所以返回正常。
  解决方法二选一：

1. 若为React脚手架创建的项目，直接在前端项目根目录的package.json中新增代理配置：

"proxy": "http://localhost:5000"

2. 给axios配置全局baseURL，或直接写全请求地址：

// 全局配置示例，放在axios导入的公共文件中
axios.defaults.baseURL = 'http://localhost:5000'
// 或直接补全请求地址
const { data } = await axios.get("http://localhost:5000/api/passwords");

如果控制台报CORS跨域错误，后端需要安装cors依赖并配置：

// 服务端入口文件新增
import cors from 'cors'
app.use(cors())

• 检查Redux失败动作是否触发
  打开Redux DevTools，查看PASSWORD_LIST_FAIL action是否被触发，如果有，直接读取payload中的错误信息即可定位问题：404代表请求地址错误，500代表后端接口处理逻辑报错，CORS相关提示代表跨域配置缺失。

• 检查Action Type常量拼写
  确认PASSWORD_LIST_REQUEST、PASSWORD_LIST_SUCCESS、PASSWORD_LIST_FAIL三个常量在action文件、reducer文件、常量定义文件中的拼写、大小写完全一致，拼写错误会导致reducer无法匹配到成功的action，即便接口请求成功，store状态也不会更新。

• 检查组件状态取值逻辑
  你在组件中获取store状态时，要对应combineReducers中定义的keypasswordList，正确写法示例：

import { useSelector, useDispatch } from 'react-redux'
import { listPasswords } from './actions/passwordActions'
import { useEffect } from 'react'

const PasswordList = () => {
  const dispatch = useDispatch()
  // 此处key必须和combineReducers中注册的key一致
  const { loading, error, passwords } = useSelector(state => state.passwordList)

  useEffect(() => {
    dispatch(listPasswords())
  }, [dispatch])

  // 后续渲染逻辑
}

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