React+Node.js(Express)+DynamoDB中Update/Delete请求CORS错误求助

Hey there! Let's break down why your Update (PUT) and Delete requests are hitting CORS errors even though GET/POST work—this is a super common gotcha with Express and CORS, so let's troubleshoot step by step:

1. Preflight Requests Aren't Being Handled Correctly #

Browsers send an OPTIONS preflight request for non-"simple" methods like PUT/DELETE before executing the actual request. If your server doesn't explicitly allow these methods or fails to respond to the OPTIONS check, the browser blocks the request.

• If you're using the cors npm package, make sure you explicitly list allowed methods (including OPTIONS):

  const cors = require('cors');
  app.use(cors({
    origin: 'http://localhost:3000', // Replace with your frontend URL
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  }));
  

• If you're setting headers manually, ensure you have a dedicated handler for OPTIONS requests:

  app.options('*', (req, res) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.sendStatus(200);
  });
  

2. Route Ordering Is Off #

If your CORS middleware is defined after your PUT/DELETE routes, those requests will hit the route handler before the CORS headers are applied. Always place your CORS setup at the top of your Express app, before any route definitions.

3. Specific Route CORS Misconfiguration #

Maybe you added CORS headers manually to your GET/POST routes but forgot to include them in PUT/DELETE handlers. Double-check that every PUT/DELETE response includes the required headers:

app.put('/items/:id', (req, res) => {
  // Your update logic here
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.json(updatedItem);
});

4. AWS Service CORS Settings (If Applicable) #

If you're using API Gateway to connect Express to DynamoDB, API Gateway has its own CORS configuration. Head to the AWS Console, find your API Gateway resource, and verify that:

• Allowed Methods includes PUT and DELETE
• Allowed Origins matches your frontend URL

5. Stale Browser Cache #

Browsers sometimes cache preflight response results. Try testing in incognito mode or clearing your browser cache to rule out cached, outdated CORS rules.

Start with checking preflight handling—it's the most likely culprit. Double-check your middleware order and explicit method permissions, and you should have those PUT/DELETE requests working in no time!

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