React前端请求后端/api/v1/me遇Proxy Error(ECONNREFUSED)求助

错误信息 #

Proxy error: Could not proxy request /api/v1/me from localhost:3000 to http://localhost:6000/. ECONNREFUSED

后端状态 #

• 后端运行于6000端口，状态正常，已成功连接数据库
• 通过Postman直接访问包括/api/v1/me在内的所有路由均能正常响应

后端核心代码（app.js） #

import express from "express";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import cors from "cors";
import { connectDatabase } from "./config/dbConnect.js";
import errorMiddleware from "./middlewares/errors.js";

const app = express();

// Load environment variables
if (process.env.NODE_ENV !== "PRODUCTION") {
  dotenv.config({ path: "backend/config/config.env" });
}

// Connect to the database
connectDatabase();

// Middleware for JSON and cookies
app.use(express.json());
app.use(cookieParser());

// Setup CORS for frontend access
app.use(
  cors({
    origin: "http://localhost:3000", // Frontend URL
    credentials: true,
  })
);

// Import routes
import authRoutes from "./routes/auth.js";

// Use routes
app.use("/api/v1", authRoutes);

// Error handling middleware
app.use(errorMiddleware);

// Start the server
const server = app.listen(process.env.PORT, () => {
  console.log(
    `Server started on PORT: ${process.env.PORT} in ${process.env.NODE_ENV} mode.`
  );
});

// Handle unhandled promise rejections
process.on("unhandledRejection", (err) => {
  console.log(`ERROR: ${err}`);
  console.log("Shutting down server due to Unhandled Promise Rejection");
  server.close(() => {
    process.exit(1);
  });
});

路由与控制器实现 #

路由配置 #

router.route('/me').get(isAuthenticatedUser, getUserProfile);

控制器方法 #

export const getUserProfile = catchAsyncErrors(async (req, res, next) => {
  const user = await User.findById(req?.user?._id);
  res.status(200).json({
    user,
  });
});

前端Redux代码 #

Action 代码 #

export const loadUser = () => async (dispatch) => {
  try {
    dispatch({ type: LOAD_USER_REQUEST });

    const { data } = await axios.get('/api/v1/me');

    dispatch({
      type: LOAD_USER_SUCCESS,
      payload: data.user
    });
  } catch (error) {
    dispatch({
      type: LOAD_USER_FAIL,
      payload: error.response.data.message
    });
  }
};

Reducer 代码 #

export const authReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case LOAD_USER_REQUEST:
      return {
        loading: true,
        isAuthenticated: false,
      };

    case LOAD_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload
      };

    case LOAD_USER_FAIL:
      return {
        ...state,
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload
      };

    default:
      return state;
  }
};

前端配置与问题 #

• React前端运行于localhost:3000，使用axios结合Redux发起请求
• 已在package.json中配置代理：

  "proxy": "http://localhost:6000"
  

• 错误说明：从前端访问/api/v1/me时，请求无法转发至后端，提示ECONNREFUSED

已尝试的解决方法 #

• 确认前后端均在对应端口正常运行
• 检查后端服务器日志，未发现异常
• 确认CORS配置已允许localhost:3000访问后端
• 尝试重启前后端服务器

请问可能是什么原因导致该问题？是代理配置有误，还是前端请求方式存在问题？

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