携带Token调用API获取数据时出现TypeError: Network request failed错误

• 排查跨域问题
  浏览器同源策略会拦截跨域请求，如果前端域名和API域名不一致，得让后端配置CORS，允许你的域名访问。去浏览器控制台的Network面板看请求响应头，有没有Access-Control-Allow-Origin字段。

• 验证Token有效性
  别光看Bearer格式对不对，Token可能过期、权限不足或者格式有隐形问题。直接用Postman带相同Token调用这个API，能正常返回的话，就排除Token本身的问题。

• 核对请求URL
  检查API地址有没有拼写错误，比如域名、路径是不是和官方文档一致，GET请求要带的参数有没有正确拼到URL上。

• 添加错误详情捕获
  修改代码，捕获HTTP状态码这类关键信息，能更快定位问题：

  const fetchListChats = (accessToken) => {
      const bearer = `Bearer ${accessToken}`;
  
      fetch('https://api.quickmatic.ai/api/chat/list', {
        method: 'GET',
        headers: { 
          'Authorization': bearer,
          'Accept': 'application/json',
        }
      })
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP错误！状态码: ${response.status}`);
          }
          return response.json();
        })
        .then(data => {
          console.log('数据:', data);
        })
        .catch(error => {
          console.log('错误详情:', error);
        });
    };
  

• 检查网络环境
  用ping命令测试API域名能不能访问，看看是不是代理、防火墙挡住了请求。

• 确认请求头格式
  仔细核对Authorization头，Bearer和Token之间只能有一个空格，不能有多余字符，控制台打印bearer变量仔细检查。

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