CORS 预检请求错误 ExpressJS 和 Angular

Question

I am trying to create a simple login using an ExpressJS backend, just to test to see how this would work. But for some weird reason an OPTIONS call is done on to my Angular front-end and throws a CORS error.

The request headers of the OPTIONS call can be seen in the image below.

My ExpressJS Cors setup:

// There are 2 front-end applications, only the second is used now but it needs to work with both.
env.redirectURL = ['http://localhost:4200', 'http://localhost:5200'];

const app = express();
app.use(cors({ credentials: true, origin: env.redirectURL }));

In this code below I create a JWT token and send it to the front-end using redirection. This then for some reason calls an "options" request on my front-end which fails.

export default (req: Request, res: Response) => {
  if (!req.user) {
    if (env.logging) console.error('No user found!');
    res.status(500).send();
    return;
  }

  const expiresIn = 30 * 60 * 24 * 60000;

  jwt.sign(req.user, env.jwt.secret, { expiresIn }, (err, token) => {
    if (err) {
      if (env.logging) console.error(err);
      res.sendStatus(500); // Handle Error Better
    } else {
      res.cookie('token', token, {
        sameSite: false,
        httpOnly: true,
        secure: env.jwt.secure,
        expires: new Date(new Date().getTime() + expiresIn),
      });

      res.redirect(env.redirectURL[1]);
    }
  });
};

I have been stuck on this for multiple days now and tried to do the same thing months ago as well. I feel stupid for not being capable of figuring this out and this is my last resort.

Answer 1

It is very hard to fix this issue without debug.

Could you try to replace this code?

// There are 2 front-end applications, only the second is used now but it needs to work with both.
env.redirectURL = ['http://localhost:4200', 'http://localhost:5200'];

const app = express();
app.use(cors({ credentials: true, origin: env.redirectURL }));

by

const allowedOrigins = ['http://localhost:4200', 'http://localhost:5200'];
app.use(cors({
    origin: function (origin, callback) {
        if (!origin) return callback(null, true);
        if (allowedOrigins.indexOf(origin) === -1) {
            const msg = 'The CORS policy for this site does not allow access from the specified Origin.';
            return callback(new Error(msg), false);
        }
        return callback(null, true);
    },
    credentials: true,
}));