使用React+Redux调用本地API获取单条数据返回404错误如何解决？

问题原因 #

最核心的错误是API请求路径为相对路径，触发了路径拼接错误：
你在action中编写的请求地址为 api/products/${productId}，没有前缀斜杠，属于相对路径。请求发起时会自动拼接当前页面的URL路径作为前缀，比如你详情页路由为 /products/商品ID，最终实际发起的请求地址会变为 /products/api/products/商品ID，和你Postman中直接访问的根路径下的 /api/products/商品ID 完全不符，因此返回404。

此外还有两个额外的可优化点：

• 若你的前后端服务运行在不同端口，首页请求正常说明你已配置了/api前缀的请求代理转发到后端服务，无斜杠的相对路径无法匹配代理规则，会被前端静态服务直接接收，自然找不到对应资源
• 你的productDetailReducer中，PRODUCT_DETAILS_START 分支返回值仅保留loading: true，会清空之前存储的product、error字段，建议修改为return { ...state, loading: true }避免异常渲染问题

修复方案 #

修改action中的请求路径，添加前缀斜杠改为根路径下的绝对路径：

// 把这行
const { data } = await axios.get(`api/products/${productId}`);
// 改成
const { data } = await axios.get(`/api/products/${productId}`);

修改完成后重新测试即可正常请求到接口数据。

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