使用async函数fetch数据时，如何捕获401错误？

你的问题核心在于：当token过期返回401时，服务器没有同时返回正确的CORS响应头，导致浏览器直接拦截了响应，fetch请求直接抛出TypeError，你原来的response.ok判断代码根本没机会执行。

解决步骤 #

1. 用try/catch包裹整个请求流程

async函数中，fetch的Promise一旦reject（比如CORS错误、网络错误），会直接抛出异常，必须用try/catch才能捕获并处理。

2. 后端必须配合设置CORS头

这是关键前提！如果服务器返回401状态码时，没有添加Access-Control-Allow-Origin等CORS相关头，浏览器会拦截响应，前端完全拿不到401的状态信息，只能看到CORS错误提示。所以需要后端在所有响应（包括错误响应）中都配置允许前端域名的CORS头。

3. 修改后的代码示例

async function getBilling(url, id, date) {
  try {
    const requestOptions = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
    };
    const response = await fetch(`${url}/billing/${id}/${date}`, requestOptions);
    
    // 服务器返回响应且CORS头正确时，这里能拿到状态码
    if (!response.ok) {
      if (response.status === 401) {
        console.log('触发401错误，token已过期或无效');
        // 这里添加你的401处理逻辑：比如跳登录页、刷新token等
      } else {
        throw new Error(`HTTP请求失败，状态码：${response.status}`);
      }
    }
    
    const data = await response.json();
    if (data.code === 0) {
      // setState(...) 处理成功逻辑
    } else {
      // 处理业务错误逻辑
    }
  } catch (error) {
    console.error('请求出错:', error);
    // 这里处理网络错误或CORS错误
    // 注意：如果是CORS拦截导致的错误，无法直接获取401状态码，必须后端修复CORS配置
  }
}

额外说明 #

• 如果后端还没修复CORS配置，你暂时无法直接通过代码判断是否是401，只能从控制台的错误信息里看到net::ERR_FAILED 401，但代码层面捕获不到这个状态码。
• 只有当后端返回401时同时携带正确的CORS头，前端才能通过response.status拿到401并处理。

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