Form Submit shows strange error in console

Question

I'm working on a small ToDo app where I've Angular as front-end and Node.js/Express/Mongo as middleware/backend.

While I submit Login in my Login form, it hits the login API, however it returns one strange output in the console saying

OPTIONS http://localhost:3000/api/v1/users/login/ 0 {}

(see screenshot below) which doesn't allow me to get the dashboard even after successful login.

I've enabled CORS through installing the cors NPM module. and I've checked RESTFul services in Postman, and all are working fine.

[Updated] This is how I've enabled the CORS in my express.js's app.js file.

let cors = require('cors');
app.use(cors());
app.options('*', cors());

Please share your CORS settings/code. This is a common error when the port is not configured for CORS in your api. — Athanasios Kataras, Dec 04 '19 at 14:14
Is you API [set to accept `OPTIONS` request](https://stackoverflow.com/questions/33483675/getting-express-server-to-accept-cors-request) ? — Nicolas, Dec 04 '19 at 14:16
@Nicolas I hope, I'm doing it through the CORS module (which I've updated in my post). Is that what you're looking for? — David R, Dec 04 '19 at 14:19

score 2 · Answer 1 · answered Dec 04 '19 at 14:17

2

before a CORS request is sent to the server, clients will always send this "OPTIONS" request as a "preflight request", soliciting supported methods from the server.

This request being blocked may be an indicator of a wrong CORS configuration or an explicit block of all "OPTIONS" requests from the server. (CORS needs to be configured on the server as well).

More information can be found here

answered Dec 04 '19 at 14:17

Janis Jansen

996
1
16
36

I hope, I've done it using the CORS npm module. Do I need to try something else? – David R Dec 04 '19 at 14:21
You could try to allow all `OPTIONS` request on your backend. – Janis Jansen Dec 04 '19 at 14:22
Do you mean by setting the appropriate header like this `res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");` ?? – David R Dec 04 '19 at 14:24
Yes, this is what I would try. – Janis Jansen Dec 04 '19 at 14:26
Sure, I'll try it. – David R Dec 04 '19 at 16:14

score 1 · Accepted Answer · answered Dec 04 '19 at 14:49

It seems that this is a known nodejs issue that is still open.

Based on the open github, seems that the best recommendation is to try something like this:

you need to allow both:

// Http.OPTIONS method for request that is hitting " apiUrl =https://127.0.0.1:3000/login".
// Allow CORS like below:
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'content-type');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');

Another great idea is to use the angular proxy settings for local development so that you will not need to add CORS for localhost at all.

Very good guidance in this SO answer here on setting up a proxy for angular If this work, then you can make 100% sure that it is indeed a CORS problem.

jogarcia · Answer 3 · 2019-12-04T16:01:26.307

To handle CORS in express you dont need to add any dependency. Notice that http://localhost:4200 is you angular app.

This worked for me:

//Add here whatever route you are using for the api.
app.use('/api', (req, res, next) => {
  //Where http://localhost:4200 is the angular app
  res.header('Access-Control-Allow-Origin', 'http://localhost:4200'),
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  next();
})

Note: This goes after the place where you import the routes and before where you use them. kind of like:

const apiRouter = require('./app_api/routes/api_routes');
//The code i posted here
app.use('/api', apiRouter);

Form Submit shows strange error in console

3 Answers3