React.js向服务器发送数据时出现TypeError: Failed to fetch错误求助

我在向服务器发送登录请求时遇到了TypeError: Failed to fetch错误，我的登录函数代码如下：

function login(username, password) { 
  const requestOptions = { 
    method: 'POST', 
    headers: { 
      'Content-Type': 'application/json','charset':'utf-8' 
    }, 
    body: JSON.stringify({ 'username':username , 'password':password }) 
  }; 
  console.log(requestOptions); 
  return fetch(BASE_URL+serverConstants.LOGIN_POST_REQUEST, requestOptions) 
    .then(response => { 
      if (!response.ok) { 
        return Promise.reject(response.statusText); 
      } 
      // 后续处理逻辑（原代码截断）
    })
}

可能的原因及对应的解决办法 #

1. CORS（跨域资源共享）限制

这是触发Failed to fetch最常见的原因。如果你的前端页面和后端API不在同一域名、端口或协议下，浏览器会自动做CORS校验，要是后端没配置允许跨域的响应头，请求就会被拦截。

• 解决：在后端服务中添加CORS相关响应头，比如Access-Control-Allow-Origin: 你的前端域名（生产环境别用*，要指定具体域名），同时确保允许POST方法以及Content-Type这类请求头。

2. 请求URL拼接错误

检查BASE_URL + serverConstants.LOGIN_POST_REQUEST拼接后的完整地址是否正确——有没有拼写错误、路径层级不对，或者服务器根本没在这个地址上监听请求。

• 解决：在console.log(requestOptions)后面加一行console.log(BASE_URL+serverConstants.LOGIN_POST_REQUEST)，打印出完整URL，然后手动在浏览器或Postman里测试这个地址，看能不能正常拿到响应。

3. 请求头冗余配置问题

你的请求头里加了'charset':'utf-8'，但Content-Type: application/json已经默认使用UTF-8编码了，多余的charset配置可能会导致服务器解析请求时出错。

• 解决：删掉'charset':'utf-8'，把请求头简化为：

headers: { 
  'Content-Type': 'application/json'
}

4. 服务器或网络异常

确认后端服务器是否正常启动，前端能不能连通服务器地址，有没有防火墙、代理工具拦截了请求。

• 解决：先用curl或者Postman直接发送相同的POST请求，看能不能成功。如果工具能访问但前端不行，大概率是前端侧的网络或跨域问题；如果工具也访问失败，那就是后端服务本身的问题。

5. fetch错误处理不完整

fetch只有在网络层面彻底失败（比如断网、DNS解析失败）时才会触发reject，像404、500这类HTTP错误状态码不会直接进入catch。你的代码目前只处理了HTTP状态码异常，没捕获网络层面的错误，导致Failed to fetch直接抛出。

• 解决：在fetch调用链末尾加上catch块，完整捕获所有异常：

return fetch(BASE_URL+serverConstants.LOGIN_POST_REQUEST, requestOptions) 
  .then(response => { 
    if (!response.ok) { 
      return Promise.reject(response.statusText); 
    }
    return response.json(); // 按需解析响应内容
  })
  .catch(error => {
    console.error('登录请求出错:', error);
    return Promise.reject(error);
  });

内容的提问来源于stack exchange，提问作者S.M_Emamian