React中使用Fetch API遇TypeError: Failed to Fetch问题求助

• 确认host变量的正确性
  检查host是否包含完整的协议头（http://或https://），比如本地服务需写成http://localhost:端口号，而非仅localhost:端口号或纯IP。Fetch API缺少协议会直接导致请求解析失败。

• 移除GET请求中不必要的请求头
  GET请求没有请求体，无需设置Content-Type: application/json，这个冗余头可能触发后端CORS预检请求（OPTIONS）异常。修改代码如下：

  const getNotes = async () => {
      const response = await fetch(`${host}/api/notes/fetchall`, {
          method: "GET", 
          headers: {
              "authtoken" : "xxxxxxxxxxxxxxxxxxxxxxxxxx"
          },
      });
      // ...
  }
  

• 补全后端CORS配置细节
  即便安装了CORS包，也可能因配置不全导致问题：

  • 明确放行自定义头authtoken，比如使用cors包时需在配置中指定：

    const corsOptions = {
      origin: "你的前端服务地址", // 例：http://localhost:3000
      allowedHeaders: ["authtoken"]
    };
    app.use(cors(corsOptions));
    

  • 若后端配置了严格的方法限制，需显式允许GET方法：methods: ["GET"]。

• 检查前端运行环境
  若前端通过file://协议直接打开本地文件，浏览器同源策略会拦截Fetch请求，必须在HTTP服务器环境下运行React项目（比如通过npm start启动的开发服务）。

• 查看浏览器网络请求详情
  打开开发者工具（F12）→ 网络面板：

  • 检查OPTIONS预检请求的返回状态，若为4xx/5xx，说明CORS配置存在问题；
  • 确认GET请求是否被浏览器拦截，或是否存在路径、端口不匹配的情况。

• 核对后端服务的路径与端口
  确认后端服务运行端口与host一致，接口路径/api/notes/fetchall无拼写错误（包括大小写、斜杠格式）。

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