React Native中Axios POST请求返回404，GET正常，Node.js后端求助

问题详情 #

• React Native项目中使用Axios调用Node.js后端，GET http://10.0.2.2:8080/auth/可正常响应，但POST http://10.0.2.2:8080/auth/login返回404错误
• VS Code的Thunder Client插件中所有接口请求均能正常执行
• 已尝试配置Axios实例的base_url，问题未解决

相关代码 #

Node.js 后端代码 #

/server.js

const http = require('http');
require('dotenv').config();

const express = require('./app');
const { mongoConnect } = require('./service/mongoConnect');

const PORT  = 8080;

const server = http.createServer(express);

async function loadStartup(){
    await mongoConnect();
   
    server.listen(PORT, () => { 
        console.log(`Listening on port ${PORT}`);
     });
}

loadStartup();

/app.js

const cors = require('cors');
const morgan  = require('morgan');
const express = require('express');
const bodyParser = require("body-parser");

const authRouter = require('./routes/auth/auth.router');

const app = express();

app.use(express.urlencoded({extended: true}));
app.use(express.json());

app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(morgan("combined"));
app.use(express.json());

app.use('/auth',authRouter);

module.exports = app;

/auth.router.js

const express= require('express');

const {register, 
      login,
      verifyOTP,
      forgotPassword,
      resetPassowrd
    } = require("../../controllers/auth.controller.js");
const { verifyResetToken } = require('../../middleware/verifyResetToken.js')

const authRouter = express.Router();

authRouter.get('/',(req,res) =>res.send({test: "this is an test route"}))
authRouter.post('/register',register);
authRouter.post('/login',login);
authRouter.post('/verifyOTP', verifyOTP);
authRouter.post('/forgotPassword', forgotPassword);
authRouter.post("/resetPassword",verifyResetToken,resetPassowrd);

module.exports = authRouter;

/auth.controller.js

async function login(req, res) {
    const { email, password } = req.body;
    const loginUser = await findUserByEmail(email);
    console.log("login",email,password)
    if(!loginUser) {
        return res.status(404).send({ error: "Login User is not found" });
    }
    if(!loginUser.authentication.verified) {
        const existAccount = await findUserByEmail(email);
        const OTP = await generateNewOTP(existAccount._id);

        sendOTPByEmail(email, OTP);
        return res.status(404).send({
            id: existAccount._id,
            verified: loginUser.authentication.verified,
            error: "Verify your account!"
        });
    }
    const passwordCheck = await bcrypt.compareSync(password, loginUser.authentication.password);

    if(!passwordCheck) return res.status(400).send({ error: "Invaild Credentials" });
    const token = jwt.sign({
        userId: loginUser._id,
        userName: loginUser.name,
    }, "secret");

    const vaildLoginRes = {
        message: "Login Sucessfu1...!",
        id: loginUser._id,
        userGender: loginUser.gender,
        completedProfile: loginUser.authentication.completedProfile,
        token
    }

    loginUser.authentication.isUserLoggedIn = true;
    loginUser.authentication.loginToken = token;
    loginUser.save();
    return res.status(200).send(vaildLoginRes);
}

React Native 前端代码 #

const login = async (email:string, password:string) =>{
        try {
            const loginInfo = { email, password }
            console.log(loginInfo);
             const result = await axios.post('http://10.0.2.2:8080/auth/login',loginInfo);
             
             console.log(result.data);
            setAuthState({ 
                token: result.data.token,
                authenticated: true
            });

            axios.defaults.headers.common['Authorization'] = `Bearer ${result.data.token}`;

            await SecureStore.setItemAsync(AUTH_KEY,result.data.token);
        } catch (error) {
            console.log(error);
            return
        }
    }

排查与解决方案 #

1. 清理后端重复的请求体解析中间件 #

后端app.js中重复调用了express.json()和bodyParser.json()，可能导致请求体解析冲突，修改如下：

const cors = require('cors');
const morgan  = require('morgan');
const express = require('express');

const authRouter = require('./routes/auth/auth.router');

const app = express();

// 保留一套解析中间件即可
app.use(express.urlencoded({extended: true}));
app.use(express.json());

app.use(cors());
app.use(morgan("combined"));

app.use('/auth',authRouter);

module.exports = app;

2. 前端显式指定请求Content-Type #

确保Axios发送POST请求时携带正确的Content-Type头：

const login = async (email:string, password:string) =>{
        try {
            const loginInfo = { email, password }
            console.log(loginInfo);
             const result = await axios.post('http://10.0.2.2:8080/auth/login', loginInfo, {
                 headers: {
                   'Content-Type': 'application/json'
                 }
               });
               
             console.log(result.data);
            setAuthState({ 
                token: result.data.token,
                authenticated: true
            });

            axios.defaults.headers.common['Authorization'] = `Bearer ${result.data.token}`;

            await SecureStore.setItemAsync(AUTH_KEY,result.data.token);
        } catch (error) {
            console.log(error);
            return
        }
    }

3. 添加后端全局404日志排查 #

在app.js末尾添加全局路由匹配捕获，确认请求是否到达后端：

// 全局404捕获与日志
app.use((req, res) => {
  console.log(`未匹配路由：${req.method} ${req.path}`);
  res.status(404).send({ error: 'Route not found' });
});

4. 增强CORS配置（解决预请求问题） #

修改CORS配置，确保允许POST等方法及自定义头：

app.use(cors({
  origin: true,
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

5. 验证请求体接收情况 #

在后端login控制器中打印请求体，确认是否正确解析：

async function login(req, res) {
    console.log("接收的请求体：", req.body); // 新增日志
    const { email, password } = req.body;
    // ... 剩余代码
}

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