React+Redux结合axios调用json-server发POST请求报404错误

报错核心原因 #

两处配置错误直接导致请求无法匹配json-server接口规则：

• axios实例配置项拼写错误
  axios.create 接收的配置参数中，指定基础请求路径的键名是严格驼峰命名的 baseURL（其中URL为全大写），你代码中写的是小写u开头的 baseUrl，该配置项无法被axios识别生效。
  实际运行时，axios发起请求不会自动拼接 http://localhost:3001 前缀，请求会默认发往前端页面所在的当前源地址，自然匹配不到3001端口上json-server提供的 POST /streams 接口，触发 cannot POST /streams 的404报错。
• 异步action变量引用缺失
  thunk异步函数中直接调用 Streams.post()，但代码内没有提前导入之前导出的axios实例，运行时会触发未定义变量报错，即便路径正确也无法正常发起请求。

修正方案 #

1. 调整axios实例的配置拼写

   import axios from "axios";
   export default axios.create({
     baseURL: "http://localhost:3001", // 修正原有的baseUrl拼写为baseURL
   });
   

2. 补全action文件的导入与请求逻辑

   // 顶部按实际文件存储路径导入之前编写的axios实例
   import Streams from './存放axios实例的文件路径'
   
   export const add_Stream = (formValues) => async (dispatch) => {
     // 等待POST请求完成拿到响应数据
     const response = await Streams.post("/streams", formValues);
     // 将接口返回值同步到Redux store
     dispatch({ type: 'CREATE_STREAM', payload: response.data });
   };
   

生效验证 #

• 终端执行 npm start 确认json-server正常启动，检查启动日志中是否明确列出 http://localhost:3001/streams 的资源地址，排除端口占用、启动失败问题。
• 触发请求后在浏览器开发者工具XHR面板中，核对POST请求的完整URL，确认请求地址指向 http://localhost:3001/streams，若地址偏离该值则说明baseURL配置仍未生效。

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