React应用代理API调用失败求助：请求未发送至代理域名

以下是针对问题的具体排查步骤和解决方法：

1. 重启React开发服务器 #

React的proxy配置仅在**开发环境（由create-react-app启动的dev server）**生效，修改package.json中的proxy字段后，必须完全重启React开发服务器，新配置才会加载。

2. 避免静态文件优先级冲突 #

你客户端请求的是根路径fetch("/")，而React项目默认的public/index.html会被dev server优先返回，导致请求不会被转发到代理服务器。解决方式二选一：

• 修改请求路径为非根路径，比如fetch("/api")，同时将服务器路由调整为：

  app.get("/api", (req,res)=>{
      console.log("apicalled")
      res.cookie("refreshToken", 987654321, {
          maxAge: 60000,
          httpOnly: true
      })
      res.send("has cookie sent?")
  })
  

• 或者通过自定义dev server配置降低静态文件优先级（推荐第一种简单方案）。

3. 验证服务器状态 #

直接在浏览器访问http://localhost:3001，确认服务器是否正常响应并触发console.log("apicalled")。如果服务器未启动、端口占用或代码有误，代理请求必然失败。

4. 检查请求实际走向 #

打开浏览器开发者工具的Network面板，查看该fetch请求的实际URL：

• 如果URL是React dev server的端口（通常是3000），说明代理未生效；
• 如果URL是http://localhost:3001但返回错误，检查服务器是否正确监听3001端口或路由是否匹配。

5. 改用setupProxy.js配置（推荐） #

对于create-react-app v5及以上版本，官方更推荐使用setupProxy.js替代package.json中的proxy字段，兼容性更好：

1. 安装依赖：

   npm install http-proxy-middleware --save-dev
   

2. 在项目src目录下创建setupProxy.js文件：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   module.exports = function(app) {
     app.use(
       '/',
       createProxyMiddleware({
         target: 'http://localhost:3001',
         changeOrigin: true,
       })
     );
   };
   

3. 重启React开发服务器。

你提供的相关代码： #

client package.json

"proxy":"http://localhost:3001"

client app代码

useEffect(() => {
    const apicall = async () => {
      try{
        const response = await fetch("/")

        if (response.status !== 200){
          throw new Error()
        }
        else{
          console.log("api call was success")
          console.log(response)
        }

    } catch(error){
      console.log(error)
    }}
    apicall()
  }, [])

server代码

app.get("*", (req,res)=>{
    console.log("apicalled")
    res.cookie("refreshToken", 987654321, {
        maxAge: 60000,
        httpOnly: true
    })
    res.send("has cookie sent?")
})

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