已开启CORS的Express服务器仍遭Angular异步请求跨域失败求助

Hey there, let’s dig into why your cross-domain requests are still failing even after adding CORS headers to your Express server. The error message says the Access-Control-Allow-Origin header is missing, which usually points to one of these key issues:

1. You’re Not Handling OPTIONS Preflight Requests #

When your Angular app sends a POST request with Content-Type: application/json (which it does here, since you’re sending a JSON payload), browsers first fire an OPTIONS preflight request to check if the server allows cross-domain requests. Your current CORS middleware doesn’t handle this OPTIONS request, so the server never returns the required CORS headers for the preflight, leading to the error.

Fixes: #

Option A: Use the Official cors Package (Recommended)

This package handles preflight requests automatically and avoids manual header mistakes:

• Install it first:

  npm install cors
  

• Update your Express code to use it (place it before other middleware):

  const express = require('express');
  const bodyParser = require('body-parser');
  const cors = require('cors'); // Import the cors package
  const app = express();
  const fs = require("fs");
  const MockupData = require('./MockupData').MockupData;
  
  // Enable CORS for all requests
  app.use(cors());
  
  // Then add other middleware
  app.use(bodyParser.json());
  app.use(express.static('public'));
  
  // Rest of your code remains the same...
  

Option B: Manually Handle OPTIONS Requests

If you want to stick with your custom middleware, add handling for OPTIONS:

app.use( (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  
  // Respond to preflight OPTIONS request immediately
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
    return res.status(200).send({});
  }
  
  next();
});

// Place bodyParser AFTER the CORS middleware
app.use(bodyParser.json());
app.use(express.static('public'));

2. Middleware Order Is Wrong #

In your current code, you’re loading bodyParser.json() before your CORS middleware. Middleware runs in the order you define it—if bodyParser encounters an error (like malformed JSON) and sends a response early, your CORS headers will never be added to that response. Always put your CORS middleware first to ensure headers are set for every request.

3. Double-Check the Request URL #

Your Angular code uses http://our.subdomain.com/api, but the error shows the request is going to http://webdev.objectiveportal.com/api. Make sure these URLs match—if your Angular app is hitting a different server than the one with your CORS config, the headers won’t be present.

Quick Test to Verify #

After applying the fixes, you can use tools like curl to check if the headers are present:

curl -I -X OPTIONS http://your-server-domain/api

You should see Access-Control-Allow-Origin: * in the response headers.

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