React中cross-fetch请求Laravel遇302 Found及Redux表格数据请求问题

嘿，我来帮你梳理下这两个问题的解决方案——先搞定最头疼的302重定向，再确认你的表格请求逻辑有没有可以优化的地方。

一、排查并解决Laravel返回302的核心原因 #

Laravel返回302基本都是认证拦截导致的自动重定向，大概率是请求没通过框架的身份校验，被导向了登录页。你可以从这几个方向入手：

1. 给fetch请求带上认证凭证 #

如果你的接口需要登录才能访问，得根据Laravel的认证方式给请求加凭证：

• Session认证（Laravel默认web guard）：要让fetch自动携带Session Cookie，必须加credentials: 'include'参数：

// 补全你action里的fetch代码
fetch('/api/transactions', {
  method: 'GET',
  credentials: 'include', // 关键：让浏览器传递Session Cookie
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})

• Token认证（API guard）：要在请求头里带上Bearer Token：

fetch('/api/transactions', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${你的用户Token}`
  }
})

2. 确认Laravel路由的配置位置 #

• 如果是纯API接口，一定要把路由写在routes/api.php里！web.php里的路由默认启用Session和CSRF保护，未登录的GET请求会直接重定向；而api.php用的是API guard，未授权会返回401而不是302。
• 如果必须用web.php的路由，还要额外带上CSRF令牌：

// 先从页面meta标签里拿CSRF令牌
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

// 加到请求头里
fetch('/transactions', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Accept': 'application/json',
    'X-CSRF-TOKEN': csrfToken
  }
})

3. 检查认证中间件的逻辑 #

如果你的路由用了auth中间件，确认中间件没自定义重定向规则。默认情况下，auth对API请求返回401，对web请求才会重定向到登录页（302）。

二、完善表格组件的请求逻辑 #

看你贴的代码，有个小细节可以调整：
在mapDispatchToProps里，你定义的fetchTransactions接收了value参数，但实际调用时既没传参也没用到这个参数，完全可以简化成：

const mapDispatchToProps = dispatch => ({ 
  fetchTransactions: () => dispatch(fetchTransactions()) 
})

如果后续需要传递分页、筛选这类参数，再改成带参数的形式就行。

另外，记得给action补全请求的成功/失败处理，避免请求异常时没有反馈：

export function fetchTransactions() { 
  return function (dispatch) { 
    dispatch(requestTransactions()) 
    return fetch('/api/transactions', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json();
    })
    .then(data => {
      dispatch(receiveTransactions(data)); // 假设你有接收数据的action
    })
    .catch(error => {
      dispatch(failTransactions(error)); // 处理请求失败的action
    })
  }
}

总结解决步骤 #

1. 给cross-fetch请求加上对应认证方式的凭证（Cookie/Token）和必要请求头；
2. 确认Laravel路由配置在正确的文件里（api.php/web.php）；
3. 补全Redux action的错误处理逻辑；
4. 精简mapDispatchToProps里的冗余参数。

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