AWS EC2部署MERN应用：React前端Axios POST请求后端接收空Body问题排查与解决

I'm deploying a MERN app on AWS EC2. The frontend renders successfully, but when making an Axios.post call to my backend API, the backend receives an empty request body. However, when I call the same API using Postman, the backend gets the full body without issues.

Here's the debug output of the requests:

Postman Request #

Method: POST
Path: /api/auth
Body: { email_id: 'comiiii@gmail.com', password: 'comiiii@123', user_type: 'type_com' }
Headers: { host: '64.1.75.248', 'x-real-ip': '113.103.59.237', 'x-forwarded-for': '113.103.59.237', 'x-forwarded-host': 'ec2-64-1-75-248.ap-south-1.compute.amazonaws.com', 'content-type': 'application/json;charset=UTF-8', connection: 'close', 'content-length': '94', 'user-agent': 'PostmanRuntime/7.26.8', accept: '*/*', 'postman-token': 'a6ef6f75-716b-4843-a773-8b46d1f28427', 'accept-encoding': 'gzip, deflate, br' }

React Frontend Request #

Method: POST
Path: /api/auth
Body: {}
Headers: { host: '64.1.75.248', 'x-real-ip': '213.235.108.12', 'x-forwarded-for': '213.235.108.12', 'x-forwarded-host': 'ec2-64-1-75-248.ap-south-1.compute.amazonaws.com', 'content-type': 'application/json;charset=UTF-8', connection: 'close', accept: '*/*', 'access-control-request-method': 'POST', 'access-control-request-headers': 'access-control-allow-origin,content-type', origin: 'http://ec2-64-1-75-248.ap-south-1.compute.amazonaws.com', 'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36', 'sec-fetch-mode': 'cors', referer: 'http://ec2-64-1-75-248.ap-south-1.compute.amazonaws.com/', 'accept-encoding': 'gzip, deflate', 'accept-language': 'en-GB,en-US;q=0.9,en;q=0.8' }

Comparing the two, I notice the frontend request includes headers that are forbidden request headers. How can I fix this issue?

Let's break down what's happening here and fix it step by step:

1. Recognize the "POST" request you're seeing is actually a CORS preflight OPTIONS request #

First off, that frontend request with an empty body isn't your actual POST call—it's the browser's CORS preflight OPTIONS request. Browsers send these automatically when making cross-origin requests (even if both frontend and backend are on the same EC2 instance, different ports count as cross-origin) to verify the backend allows the actual request.

The access-control-request-method and access-control-request-headers headers are dead giveaways this is a preflight. These headers are sent by the browser, not your Axios code, and they're supposed to be there—your issue is likely that your backend isn't handling this preflight request correctly, so the browser never sends the actual POST request with the body.

2. Fix your backend's CORS configuration #

To resolve this, you need to configure your backend to accept cross-origin requests and properly respond to OPTIONS preflights. If you're using Express, here's how:

• Install the cors npm package:

  npm install cors
  

• Add the CORS middleware to your Express app (in app.js or server.js):

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // Allow cross-origin requests (adjust origin for production!)
  app.use(cors({
    origin: 'http://ec2-64-1-75-248.ap-south-1.compute.amazonaws.com', // Your frontend URL
    methods: ['GET', 'POST', 'PUT', 'DELETE'], // Allowed HTTP methods
    allowedHeaders: ['Content-Type'] // Allowed request headers
  }));
  

  If you want to allow all origins temporarily (not recommended for production), you can use app.use(cors()) instead.

3. Ensure your backend parses JSON request bodies #

Another common issue is forgetting to add middleware to parse JSON bodies. Without this, even if the POST request gets through, your backend will see an empty body. Add this line before your route definitions:

// Parse JSON request bodies
app.use(express.json());

4. Clean up your Axios request configuration #

Double-check your Axios code to make sure you're not manually setting forbidden headers like access-control-allow-origin (that's a response header, not a request header). Your Axios call should look something like this:

import axios from 'axios';

// Example login request
axios.post('/api/auth', {
  email_id: 'comiiii@gmail.com',
  password: 'comiiii@123',
  user_type: 'type_com'
})
.then(response => {
  console.log('Success:', response.data);
})
.catch(error => {
  console.error('Error:', error);
});

Axios automatically sets the Content-Type: application/json header and serializes your JavaScript object to JSON, so you don't need to do that manually.

5. Verify the fix #

After making these changes, restart your backend and test the frontend request again. The browser will first send the OPTIONS preflight, your backend will respond with the correct CORS headers, and then the actual POST request with the full body will be sent—your backend should now receive the data correctly.

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