CORS error with Angular UI and Node backend

Question

I'm new to node and need some help.

I'm getting: Access to XMLHttpRequest at 'http://localhost:3000/api/auth/signin' from origin 'http://localhost:4200' has been blocked by CORS policy:

my angular app is launching from http://localhost:4200

And I'm making an api request (which works on postman) to http://localhost:3000/api/auth/signin

but I'm getting CORS errors.

In my node server.js, I have the following configured:

    app.use(function (req, res, next) {
      res.setHeader("Access-Control-Allow-Origin", "*");
      res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      res.setHeader('Access-Control-Allow-Methods', "GET, POST, PATCH, DELETE, OPTIONS");
      next();
    });

And I can post data using postman to: localhost:3000/api/auth/signin

Make sure that your router should be register after your server configuration. — hoangdv, Dec 26 '22 at 02:00
`http://localhost:3000` needs to set CORS headers not `http://localhost:4200`. — gre_gor, Dec 26 '22 at 03:13

NeNaD · Answer 1 · 2022-12-26T03:32:07.593

It's because Browser will send something called preflight request, and Postman will not. So, your server has to respond to these preflight requests first, in order for Browser to proceed with original request.

Your code will just call next() which will proceed to the next middleware, but what will that middleware do after? You should send 200 on OPTIONS request immediately.

Alternatively, you can quickly add cors logic with cors package:

const cors = require('cors');

...

app.use(cors());

CORS error with Angular UI and Node backend

1 Answers1