Axios跨域POST请求返回200却触发Network Error问题求助

Hey there, let's work through this CORS issue you're facing with Axios and your custom non-NodeJS API. It's a common gotcha with preflight requests, so let's break down what's happening and fix it step by step.

First: Why adding Access-Control-Allow-Origin: * to your Axios request breaks things #

That header is a response header—it's supposed to be sent by your API server, not included in the client's request. When you add it to your Axios headers, the browser sees it as an invalid request header for a cross-origin request, so it blocks the POST from even being sent after the OPTIONS preflight. Remove that line immediately—it's the wrong place for it.

Why you're seeing "Network Error" even after a successful OPTIONS request #

A successful OPTIONS status code (200/204) doesn't mean all CORS requirements are met. The browser checks more than just Access-Control-Allow-Origin in the OPTIONS response. Here are the key things to verify:

• Your API must return Access-Control-Allow-Methods in the OPTIONS response: This header needs to explicitly list POST (and any other methods your frontend uses). If it's missing, the browser will block the actual POST request, even if OPTIONS returns 200.
• Access-Control-Allow-Headers must cover all custom headers in your POST request: If your POST uses headers like Content-Type: application/json (which counts as a non-simple header) or any custom auth headers, the OPTIONS response must include all of them in this header.
• Double-check the Access-Control-Allow-Origin value: Make sure it matches your frontend's exact origin (e.g., http://localhost:3000 for local dev) or uses * (not recommended for production if you're handling credentials). Sometimes servers return this header for OPTIONS but not for the actual POST request—check both responses in your browser's Network tab.

Step-by-step fixes to implement #

1. Clean up your Axios request: Remove any CORS-related response headers from your request config. A valid POST request might look like this:

   axios.post('https://your-api-endpoint.com', 
     { /* Your request payload */ },
     {
       headers: {
         'Content-Type': 'application/json',
         // Add other custom headers here (e.g., Authorization)
       }
     }
   )
   .then(res => console.log('Success:', res))
   .catch(err => console.error('Error:', err));
   

2. Fix your API's OPTIONS response: Ensure your non-NodeJS API returns these critical headers for OPTIONS requests:

   Access-Control-Allow-Origin: http://your-frontend-origin.com
   Access-Control-Allow-Methods: POST, GET, OPTIONS
   Access-Control-Allow-Headers: Content-Type, Authorization
   Access-Control-Max-Age: 86400  # Optional, caches preflight results for 24h
   

   Make sure the server returns these headers both for the OPTIONS preflight and the actual POST response.

3. Verify the Network tab details: In your browser's DevTools Network panel, check both the OPTIONS and POST requests:

   • For OPTIONS: Confirm all the headers above are present in the Response Headers section.
   • For POST: If the POST is being sent, check if it's returning a valid status code and the correct Access-Control-Allow-Origin header.

Common pitfalls to avoid #

• Don't rely solely on console warnings—always check the actual response headers in the Network tab. Sometimes the warning message is misleading about which header is missing.
• If you're testing locally, avoid using CORS-disabling plugins as a long-term fix—they mask the actual server configuration issue that will break in production.
• Ensure your API handles OPTIONS requests properly: Some custom servers treat OPTIONS as a "throwaway" request and don't return all required headers, even if they return a 200 status.

内容的提问来源于stack exchange，提问作者call-me