Redux Action从后端指定端口获取数据失败，报未定义错误求助

我帮你梳理下问题根源和解决办法，大概率是Fetch API的使用方式不对，同时也要排查跨域相关的配置：

1. 修复Fetch的数据解析逻辑 #

你现在直接从fetch返回值里解构data，但Fetch API默认返回的是一个Response对象，并不是后端直接返回的JSON数据。必须先调用.json()方法解析响应体，才能拿到有效数据。修改后的代码如下：

export const listCategories = () => async (dispatch) => {
  try {
    dispatch({ type: 'CATEGORY_LIST_REQUEST' })
    const response = await fetch('http://localhost:5000/api/categories')
    // 先校验请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`)
    }
    const data = await response.json() // 解析JSON格式的响应数据
    dispatch({ type: 'CATEGORY_LIST_SUCCESS', payload: data })
  } catch (error) {
    dispatch({ 
      type: 'CATEGORY_LIST_FAIL', 
      payload: error.message
    })
  }
}

2. 排查跨域（CORS）问题 #

前端跑在3000端口，后端在5000端口，属于跨域请求，浏览器会触发CORS校验，如果后端没配置允许跨域，请求会被拦截，也会导致数据无法获取：

• 如果你用Node.js/Express后端，可以安装cors包并启用：

  const cors = require('cors');
  // 开发环境允许localhost:3000的请求，生产环境建议配置具体域名
  app.use(cors({ origin: 'http://localhost:3000' }));
  

• 其他后端框架也有对应的CORS配置方式，确保后端允许前端域名的跨域请求。

3. 调试小技巧 #

• 打开浏览器开发者工具的Network标签，查看/api/categories请求的状态码和响应内容，确认请求是否发送成功、后端是否返回了预期数据。
• 在代码里添加console.log(response)，查看Response对象的具体信息，方便定位问题。

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