客户端Fetch与服务端Get请求URL配置问题咨询

你需要让React客户端的Fetch请求地址和Express服务端的Get路由路径一一对应，才能成功建立通信。以下是具体配置说明和修改后的代码：

服务端（Express）路由配置 #

Express的app.get()第一个参数是接口的路由路径，需要设置一个明确的路径（比如/api/bitcoin），这样服务端才能识别并处理对应请求。

修改后的服务端代码：

//index.js: url - 'http://localhost:3001'
const express = require("express"); 

const PORT = process.env.PORT || 3001; 

const app = express(); 

// 设置Get请求的路由路径为/api/bitcoin
app.get('/api/bitcoin', (req, res) => {
  console.log("entered bitcoin query!"); 

  let msg = "这里是服务端返回的比特币数据"; // 替换成你的实际数据

  res.json({ message: msg });
}); 

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

客户端（React）Fetch URL配置 #

因为你已经在React项目中配置了代理http://localhost:3001，所以Fetch时可以直接使用相对路径（对应服务端的路由路径），React会自动将请求转发到代理的服务端地址。

修改后的客户端代码：

//bitcoin page: url - 'http://localhost:3000/bitcoin'
//NOTE: the proxy is: 'http://localhost:3001'
import React from "react"; 
import { Link } from "react-router-dom"; 

function BitCoin() {
  const [data, setData] = React.useState(null); 

  console.log("entered bitcoin page"); 

  React.useEffect(() => {
    // 使用相对路径/api/bitcoin，对应服务端的路由
    fetch("/api/bitcoin")
      .then((res) => res.json())
      .then((data) => setData(data.message))
      .catch(err => console.error("请求出错：", err)); // 增加错误捕获，方便排查问题
  }, []); 

  return (
    <div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
      THIS IS THE BitCoin PAGE

      <nav>
        <Link to="/"> Home </Link>
      </nav>

      <nav>
        <Link to="/coins"> Coins </Link>
      </nav>

      <p>{!data ? "Loading..." : data}</p>
    </div>
  )
}

export default BitCoin;

关键说明 #

• 服务端路由路径和客户端Fetch的相对路径必须完全一致（比如都用/api/bitcoin）
• 代理配置确保了React客户端的请求会被转发到http://localhost:3001，所以不需要在Fetch中写完整的服务端URL
• 增加了catch块捕获请求错误，能帮助你排查后续可能出现的问题

内容的提问来源于stack exchange，提问作者MR. potato35