Angular CORS and workflow

Issue

I have an Angular app on port 4200. I have the node server on port 300. I'm following a MEAN stack guide. To allow CORS, it suggests adding this to the server response:

app.use((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();
});

I have two questions:

1. Is this safe for deployment?

2. Is this a recommended workflow to access data from the server while in development? If it's this easy, what's the point of using Angular's in-memory-web-api-module?

Solution

You can restrict the origin a bit more, like this :

 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

instead of an asterisk.

When deployed, your header can be specified with your domain

Answered By - Damien Puaud