ReactJS中Axios POST请求跨域报错：欲用data替代params求解

Let's break down what's happening here and fix this step by step.

First: Fix Your Axios Syntax #

Your initial axios.post call has a syntax error that might be contributing to the issue. The third parameter for axios.post should be a configuration object (not just the headers directly). Here's the corrected version:

const apiUrl = `${this._url}/${route}`
const headers = { 
  'Content-Type': 'application/json', 
  'Authorization': 'JWT token' 
}
// Correct: Wrap headers in a config object
return axios.post(apiUrl, data, { headers })

Why the params Version Worked #

When you use params, the data gets appended to the URL as query parameters. This turns your POST request into a "simple request" in the eyes of the browser—simple requests don’t trigger a preflight OPTIONS request, so the CORS check is more lenient.

But when you send data in the request body with Content-Type: application/json, this counts as a "non-simple request". Browsers automatically send an OPTIONS preflight request first to ask the server if it allows this type of request. If your server doesn’t handle this OPTIONS request correctly, you’ll get the no 'Access-Control-Allow-Origin' header error.

The Real Fix: Server-Side CORS Configuration #

The core issue is on the server side—it needs to explicitly allow your frontend’s origin, the headers you’re sending, and the OPTIONS method. Here are examples for common backend stacks:

Example 1: Node.js/Express with cors middleware

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

// Configure CORS to allow your frontend, headers, and required methods
app.use(cors({
  origin: 'https://your-frontend-domain.com', // Replace with your actual frontend URL (e.g., http://localhost:3000 for dev)
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS'] // Include OPTIONS for preflight
}));

// If you need to handle OPTIONS requests explicitly for all routes
app.options('*', cors());

Example 2: Java Spring Boot

Add a CORS configuration class to allow the necessary origins and headers:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://your-frontend-domain.com")
                .allowedHeaders("Content-Type", "Authorization")
                .allowedMethods("GET", "POST", "OPTIONS")
                .allowCredentials(true); // Enable if you're using cookies/auth tokens
    }
}

Key Notes #

• Never use origin: "*" in production if you’re sending credentials (like JWT tokens)—it’s insecure. Always specify your exact frontend domain.
• Make sure your server returns the Access-Control-Allow-Origin header with your frontend’s origin, not just any value.
• Double-check that the server responds to OPTIONS requests with the correct CORS headers—this is critical for non-simple requests.

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